React 状態で配列内のオブジェクトを不変に更新するにはどうすればよいですか?

ReactJS 配列の状態オブジェクトの更新

アプリケーションの状態の一部として配列を操作する場合、個々のオブジェクトを更新する必要が生じる場合があります。それらの配列内で。これは、ユーザー データ、フォーム値、またはその他の動的コンテンツを管理する場合の一般的なタスクです。

状態更新の処理

提供された例では、CommentBox コンポーネントは次のように定義されています。コメントオブジェクトの配列を含む初期状態。 handleCommentEdit 関数は、指定された ID とテキストでコメントを更新する役割を果たします。

React における不変性

React の中核原則の 1 つは、不変状態の使用です。これは、元の状態オブジェクトを直接変更してはいけないことを意味します。代わりに、必要な変更を加えて新しい状態オブジェクトを作成する必要があります。

Object.assign を使用したオブジェクトの更新

配列内のオブジェクトを更新する 1 つの方法は、次の方法です。 Object.assign メソッド。このメソッドは、既存のオブジェクトを最初の引数として受け取り、後続の引数を元のオブジェクトにマージするキーと値のペアとして受け取ります。結果として得られるオブジェクトは、必要な変更が加えられた新しいオブジェクトです。

提供されたコード スニペットでは、このアプローチは次のように実装されています:

handleCommentEdit: function(id, text) {
    this.setState({
      data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
    });
}

Spread を使用したオブジェクトの更新

ES2018 以降では、スプレッド演算子 (...) を使用して、Object.assign と同様の結果を得ることができます。スプレッド演算子は、既存のオブジェクトのプロパティを指定されたキーと値のペアとマージします。

次のコード スニペットは、スプレッド演算子を使用してコメント オブジェクトを更新する方法を示しています。

this.setState({
  data: this.state.data.map(el => (el.id === id ? {...el, text} : el))
});

結論

これらのテクニックを使用すると、ReactJS の配列内の個々のオブジェクトを簡単に更新できます。フレームワークの不変原則。

以上がReact 状態で配列内のオブジェクトを不変に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。