如何通過建立現有狀態來更新reactjs應用程序的狀態？

Question

我正在寫一個reactjs聊天客戶端，並在文檔中遇到了這個問題，它說

切勿直接更改this.state，因為之后調用setState（）可能會替換您所做的更改。 將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

您可以使用concat將新消息附加在setState內。 這樣一來，您就不會直接更改狀態，因為concat返回了一個新數組

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