如何通过建立现有状态来更新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])});
}