ReactJS で配列内のオブジェクトをエレガントに更新するにはどうすればよいですか?

ReactJS の配列でのエレガントなオブジェクト更新

ReactJS では、アプリケーションの状態内でオブジェクトの配列を管理することが一般的なシナリオになります。そのようなタスクの 1 つは、配列内の特定のオブジェクトを更新することですが、利用可能な手法を明確に理解していないと課題が生じる可能性があります。

シナリオ例

次の React について考えてみましょう。コンポーネントの例:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        { id: 1, author: "john", text: "foo" },
        { id: 2, author: "bob", text: "bar" },
      ],
    };
  },
  handleCommentEdit: function(id, text) {
    // Handle updating of the object inside the array
  },
});

目的は、handleCommentEdit メソッドが次の場合に this.state.data 内のオブジェクトを更新することです。

Object.assign() アプローチ

一般的に推奨される方法は、Object.assign() を使用することです。これは、新しいオブジェクトを作成せずに既存のオブジェクトを更新する簡潔な方法を提供します。

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

ここでは、this.state.data の各要素を反復処理します。要素の ID が指定された ID と一致する場合、Object.assign() を使用して元の el と更新されたテキストを組み合わせて新しいオブジェクトを作成します。それ以外の場合は、元の要素を返します。

スプレッド演算子のアプローチ

より現代的なアプローチとして、ES2018 スプレッド演算子を利用できます:

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

Object.assign() メソッドと同様に、スプレッド演算子を使用して新しいオブジェクトを作成し、元のオブジェクトと更新されたオブジェクトを組み合わせます。 text プロパティ。

Object.assign() とスプレッド演算子のアプローチはどちらも、ReactJS アプリケーションの不変性を維持しながら、配列内のオブジェクトを更新する効率的かつ洗練された方法を提供します。

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