如何在 ReactJS 中优雅地更新数组中的对象？

ReactJS 数组中的优雅对象更新

在 ReactJS 中，管理应用程序状态中的对象数组可能是一种常见的场景。其中一项任务是更新数组中的特定对象，如果不清楚可用技术，这可能会带来挑战。

示例场景

考虑以下 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()方法类似，我们使用展开运算符创建一个新对象，将原始对象与更新后的文本组合起来

Object.assign() 和展开运算符方法都提供了一种高效且优雅的方法来更新数组中的对象，同时保持 ReactJS 应用程序中的不变性。

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