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

    this.setState({data: updatedComments});
  }
}
JinJin斯丁2020/04/03 11:44:58

我很喜欢使用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))
});