[解決済み] ReactJSで配列内のオブジェクトを更新する最良の方法は何ですか？

質問

状態の一部として配列があり、その配列にオブジェクトが含まれている場合、それらのオブジェクトの1つを変更することで状態を更新する簡単な方法は何ですか?

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});
  }
}

どのように解決するのですか？

状態を更新している間、重要な部分は、それが不変であるかのようにそれを扱うことです。それを保証できるのであれば、どのような解決策でもかまいません。

以下は 不変性ヘルパー :

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の状態配列の正しい修正方法
• Reactの状態を変異させるのに好ましい方法は何ですか？