Question

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

    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/>)   
        }
    }

Answer 1

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

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

Answer 2

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

您将要执行此操作，因为您将不断从套接字接收新消息，并希望将聊天保留在this.state.recentChat中并追加新聊天。

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

2 个答案: