Javascript 如何将套接字响应设置为反应状态

每当套接字接收到新数据时，我都会尝试将此数据设置为状态。
我正在创建简单的聊天应用程序，我想将最近从套接字接收的聊天数据设置为状态

    var socket = constants.SERVER;  
    var chatData = ""

    class Chat extends Component {

        constructor(props) {
            super(props);
            this.state = { recentChat:[] }
        }


  componentDidUpdate()
  {
    socket.on(constants.SOCKET_GET_CHAT, function(data){
      console.log(JSON.stringify(data))

          this.setState({
          recentChat:data
       })
    });

  }

        render() {
            return(<div/>)   
        }
    }

var socket=constants.SERVER；
var chatData=“”
类聊天扩展组件{
建造师（道具）{
超级（道具）；
this.state={recentChat:[]}
}
componentDidUpdate（）
{
socket.on（constants.socket\u GET\u CHAT，函数（数据）{
log（JSON.stringify（数据））
这是我的国家({
最近聊天：数据
})
});
}
render（）{
返回（）
}
}

您必须在componentWillMount或didMount中附加侦听器

socket.on(constants.SOCKET_GET_CHAT, data => {
  this.setState(previousState => ({
    recentChat: [...previousState.recentChat, data]
  }))
});

---

您需要这样做，因为您将不断收到来自套接字的新消息，并且希望在this.state.recentChat中保留聊天记录并附加新聊天记录。

您应该在套接字回调中设置state，您可以明确地将其放在ComponentDidUpdate中@Fabiengrad I updated我的代码的可能副本中。我将套接字放在componentDidUpdate中。但我收到了新的错误Uncaught TypeError:this.setState不是函数将其更改为箭头函数^this关键字的上下文可能会丢失。

socket.on(constants.SOCKET_GET_CHAT, data => {
  this.setState(previousState => ({
    recentChat: [...previousState.recentChat, data]
  }))
});