首页 > web前端 > js教程 > 如何在 ReactJS 中优雅地更新数组中的对象?

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

Barbara Streisand
发布: 2024-12-15 03:35:08
原创
822 人浏览过

How to Elegantly Update Objects within Arrays in 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板