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

发布于01月24日

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

示例，根据关于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});
  }
}

推荐答案

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

以下是我使用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});
  },

以下关于状态数组的问题也可能有所帮助: