在ReactJS中更新数组中对象的最佳方法是什么？

JavaScript React.js

达蒙

2020-04-03

如果您将数组作为状态的一部分，并且该数组包含对象，那么通过更改其中一个对象来更新状态的简单方法是什么？

示例，从关于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) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

第3980篇《在ReactJS中更新数组中对象的最佳方法是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
JinJin斯丁 2020.04.03

我很喜欢使用Object.assign而不是不变性助手。

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

我只是认为这比剪接要简洁得多，不需要知道索引或显式处理未发现的情况。

如果您感觉所有ES2018，也可以通过传播而不是 Object.assign

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android