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});
  }
}

「data」配列内のオブジェクトを更新するには、 updatedComments 変数の 'map' メソッド:

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

このアプローチでは、'Object.assign' を使用して既存のオブジェクトをマージします。プロパティが更新されるため、不変性が保証されます。あるいは、ES2018 と互換性のある「spread」演算子を選択することもできます。

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

これらの手法に従うことで、ReactJS アプリケーションの配列内のオブジェクトを簡単に更新できます。

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