如何在 React State 中不可变地更新数组中的对象？

更新 ReactJS 数组中的状态对象

将数组作为应用程序状态的一部分使用时，您可能会遇到更新单个对象的需要在这些数组中。这是管理用户数据、表单值或其他动态内容时的常见任务。

处理状态更新

在提供的示例中，CommentBox 组件定义为包含注释对象数组的初始状态。 handleCommentEdit 函数负责使用指定的 id 和文本更新评论。

React 中的不变性

React 的核心原则之一是使用不可变状态。这意味着原始状态对象永远不应该被直接改变。相反，必须创建一个具有所需更改的新状态对象。

使用 Object.assign 更新对象

更新数组中对象的一种方法是使用Object.assign 方法。此方法将现有对象作为第一个参数，并将后续参数作为应合并到原始对象中的键值对。生成的对象是一个具有所需更改的新对象。

在提供的代码片段中，此方法的实现如下：

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

使用 Spread 更新对象

在 ES2018 及更高版本中，可以使用扩展运算符 (...) 来实现与 Object.assign 类似的结果。扩展运算符将现有对象的属性与提供的键值对合并。

以下代码片段展示了如何使用扩展运算符来更新评论对象：

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

结论

这些技术允许您轻松更新 ReactJS 中数组中的单个对象，同时遵守不变性框架的原则。

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