既存の状態を構築してreactjsアプリの状態を更新するには？

Question

私はSETSTATE（）その後 あなたが作った突然変異を置き換えることを呼び出すと、reactjsチャットクライアントを書いて

が直接this.stateを変異させないでくださいと言いドキュメントにthisに出くわしたのです。それが 不変であるかのようにthis.stateを扱います。

setState（）はthis.stateをただちに変更するのではなく、 ペンディング状態遷移を作成します。この メソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。

setState への呼び出しの同期動作の保証はなく、パフォーマンスの向上のために呼び出しをバッチ処理することができます。

shouldComponentUpdate（）で条件付き レンダリングロジックが実装されていない限り、setState（）は常に再レンダリングをトリガーします。変更可能な オブジェクトが使用されていて、ロジックが shouldComponentUpdate（）で実装できない場合、新しい状態 が以前の状態と異なる場合にのみsetState（）を呼び出すと、不要な再レンダリングが回避されます。

メッセージが送信されると、この関数が呼び出されます。

sendMessage: function(msg) { 
    //Update the state of the app 
    var message = {username:'User', message:msg}; 
    console.log(message.toString()); 
    this.state.datas.push(message); 
    this.setState({datas: this.state.datas}); 
    }, 

私がやろうとしています次に何がコンポーネントの再レンダリングして状態をリセットメッセージのリストに新しいメッセージを追加しています。これはうまくいきますが、上で引用した文書に基づいて、これはどのように行うべきかではありません。 this.state.datas.push(message)を直接呼び出さずに、メッセージのリストを更新して状態を更新するにはどうすればよいですか？

Answer 1

新しいメッセージは、setState内にconcatを使用して追加できます。 concatは新しい配列を返します。

sendMessage: function(msg) { 
    //Update the state of the app 
    var message = {username:'User', message:msg}; 
    this.setState({datas: this.state.datas.concat([message])}); 
}