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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

以上是 在ReactJS中更新数组中对象的最佳方法是什么？ 的全部内容， 来源链接： utcz.com/qa/403916.html

回到顶部