如何高效地更新 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 使用 spread 提供了更加简洁的解决方案：

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

使用 spread，更新后的对象可以通过简单地替换现有的文本属性来创建。

结论

在ReactJS中更新数组中的对象需要仔细处理对象的不变性。通过利用 Object.assign 或 spread，开发人员可以有效地更新对象属性，同时保持原始数组的完整性。这些方法为这一常见的 ReactJS 编程挑战提供了强大且简洁的解决方案。

以上是如何高效地更新 ReactJS 数组状态中的对象？的详细内容。更多信息请关注PHP中文网其他相关文章！