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

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

阅读 436

2020-07-22

共1个答案

小编典典

在更新状态时，关键部分是将其视为不变。如果可以保证，任何解决方案都可以。

这是我使用immutability-helper的解决方案：

jsFiddle：

  var update = require('immutability-helper');

  handleCommentEdit: function(id, text) {
    var data = this.state.data;
    var commentIndex = data.findIndex(function(c) { 
        return c.id == id; 
    });

    var updatedComment = update(data[commentIndex], {text: {$set: text}});

    var newData = update(data, {
        $splice: [[commentIndex, 1, updatedComment]]
    });
    this.setState({data: newData});
  },

2020-07-22