更新を状態する

• 4 分

React で状態は不変であるため、ステートフル オブジェクトの値を変更するには、それを新しいオブジェクトに置き換えます。 これで編集によりオブジェクトの状態が無効になってしまうことによる、バグのクラスをすべて回避できます。

オブジェクトをコピーする

ブール値や数値などのプリミティブ型は、参照オブジェクトではなく、値ベースのオブジェクトです。 そのため、変更があった場合、自動的にオブジェクト全体が置き換えられます。

文字列は不変であるため、同様に動作します。 文字列を変更するときには、それを新しい値で置き換えます。

let message = 'Hello, ';
message = message + 'world!';

オブジェクトを使用する場合は、不変性を確保するために、それの新しいインスタンスを作成します。 オブジェクトのコピーを作成する最も一般的な構文は、"スプレッド演算子" とも呼ばれる "スプレッド構文" です。

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

個々のプロパティを変更する

通常、オブジェクトのプロパティは、一部のみを更新します。 コピーを作成し、それぞれのプロパティを変更することは面倒です。

前の構文では、中かっこ ({ }) を使用して新しい JSON オブジェクトを作成していることに着目してください。 スプレッド演算子を使用すると、新しいオブジェクトの初期バージョンを作成できます。 これから、特定のプロパティの値を更新して指定できます。 たとえば、テキストは保持したまま color に新しい値を指定したい場合、次のコードを使用します。

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

ここでは、text の値は元のままです。 color 値は緑色に更新されています。

// new object
{
    text: 'Hello, world',
    color: 'green'
}