首页 文章

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

提问于
浏览 次
2

我正在写一个reactjs聊天客户端，并在文档中遇到this，其中说

不要直接改变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) 的情况下更新消息列表并更新状态？

javascript reactjs state

1 回答

  • 4

    您可以使用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])});
}
    回复于

相关问题