react-addons-update - オブジェクトの配列内にオブジェクトを挿入する方法は？

Question

Reactアプリケーションでreact-addons-update npmパッケージを使用しています。具体的には、オブジェクトの配列内に新しいオブジェクトを挿入するためにupdate()メソッドを使用します。 私は私のコンポーネントの状態の一部として、このような構造を持っている：

... 
constructor(props) { 
    super(props); 
    this.state = { 
     blocks: [ 
      { 
       block_title: "some title", 
       items: [ 
        { 
         item_title: "foo" 
        }, 
        { 
         item_title: "bar" 
        } 
       ] 
      }, 
      { 
       ... 
      } 
     ] 
    }; 
} 
... 

と私は最初と2番目の項目の間、items配列に新しい項目を挿入します。 （エラーがいずれかのスローされませんされている）

... 
insertItem(){ 
    let obj = { 
     item_title: "in between foo and bar" 
    }; 
    this.setState({ 
     blocks: update(this.state.blocks, { 
      [0]: { 
       items: {$splice: [[1, 0, obj]]} 
      } 
     }) 
    }); 
} 
... 

をが、これは動作していないようです：

私はこれを試してみました。何か案は？

p.s.私はMeteorアプリケーション内でReactを使用しています。このヘルパー関数が動作しないようにするためのいくつかの特長があります。

Answer 1

コンポーネント内の他のメソッドは表示されませんが、追加したアイテムのレンダリング要素のキーの小道具が存在し、一意であることを確認してください。

Answer 2

goldbulletのコメントによると、setStateはコンポーネントの状態を非同期的に更新します。コードブロック内のsetStateに続いて実行されたプロセスが、コンポーネントが更新される前にコンポーネントの状態を実際に取得していたことがわかりました。したがって、元の質問の上記の構文は、オブジェクトの配列の深いところにオブジェクトを挿入するのに適しています。これはまた、この記事で言及された

... 
insertItem(){ 
    let obj = { 
     item_title: "in between foo and bar" 
    }; 
    this.setState({ 
     blocks: update(this.state.blocks, { 
      [0]: { 
       items: {$splice: [[1, 0, obj]]} 
      } 
     }) 
    },function(){ 
     // DO SOMETHING HERE!! 
    }); 
} 
... 

Why calling react setState method doesn't mutate the state immediately?