如何通过构建现有状态来更新 reactjs 应用程序的状态？

Posted 2023-02-21

【中文标题】如何通过构建现有状态来更新 reactjs 应用程序的状态？

【英文标题】：How to update state of reactjs app by building on existing state?

【发布时间】：2016-10-14 17:23:43

【问题描述】：

我正在编写一个 reactjs 聊天客户端，在文档中遇到了this，上面写着

永远不要直接改变 this.state，因为之后调用 setState() 可能 替换您所做的突变。把 this.state 当作是 不可变。

setState() 不会立即改变 this.state 而是创建一个 等待状态转换。调用 this 后访问 this.state 方法可能会返回现有值。

不保证 setState 调用的同步操作 并且调用可能会被批处理以提高性能。

setState() 将始终触发重新渲染，除非有条件 渲染逻辑在 shouldComponentUpdate() 中实现。如果可变 正在使用对象，并且无法在其中实现逻辑 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)的情况下更新消息列表和更新状态？

【参考方案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]));