如何在 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中文网其他相关文章！