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

ReactJS 配列でのオブジェクトの更新: 徹底的な探索

ReactJS では、状態内の配列にオブジェクトが含まれることがよくあります。これらのオブジェクトの更新は困難な場合があります。この記事では、このタスクを達成する効果的な方法について詳しく説明します。

問題を理解する

次の例を考えてみましょう:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

handleCommentEdit 関数特定の ID を持つコメント オブジェクトのテキスト プロパティを更新する責任があります。ただし、更新されたコメントの配列をどのように作成するかという疑問が生じます。

堅牢なソリューション

効率的なソリューションには、Object.assign:

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

このコード スニペットは、変更されていないオブジェクトをすべて保持しながら、既存のコメントをマップします。一致する ID を持つオブジェクトの場合、元のプロパティを維持しながら、更新されたテキスト プロパティを持つ新しいオブジェクトが作成されます。

ES2018 の機能強化

最新の JavaScript を採用している人向けES2018 は、スプレッドを使用したさらに簡潔なソリューションを提供します。

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

スプレッドを使用すると、更新されたオブジェクトは、既存の text プロパティを置き換えるだけで作成できます。

結論

ReactJS の配列内のオブジェクトを更新するには、オブジェクトの不変性を慎重に処理する必要があります。 Object.assign または Spread を活用することで、開発者は元の配列の整合性を維持しながらオブジェクトのプロパティを効率的に更新できます。これらのメソッドは、この一般的な ReactJS プログラミングの課題に対する堅牢かつ簡潔なソリューションを提供します。

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