时间戳

首页 > 解决方案 > 反应 setState 不适用于 websocket

reactjs - 反应 setState 不适用于 websocket

问题描述

我正在从 websocket 接收消息，之后我必须更新我的状态我已经过去了以前的问题并尝试向我的 setState 添加回调但它似乎仍然不起作用


constructor() {
    super();
    
    this.state = {
    bus: [5, 6]}

}


render() {

    const ws = new WebSocket("ws://-------:5055");
    const navigation = this.props.navigation;
    const state = this.state;
    const props = this.props;

    ws.onmessage = (e) => {
     
      this.setState({
        bus: e.data
      },()=>console.log( state.bus)
      );
 
    };

请注意，如果我控制台记录收到的消息，即 e.data，它确实显示收到了消息，我知道 setState 是异步的，但如果我向它添加回调它不应该工作

标签： reactjswebsocket

解决方案

在此配置中，您将在组件的每个渲染上创建新的 websocket 连接。你必须移动连接到componentDidMount钩子

  componentDidMount() {
    const ws = new WebSocket("ws://-------:5055");
    const navigation = this.props.navigation;
    const state = this.state;
    const props = this.props;

    ws.onmessage = (e) => {
      this.setState({ bus: e.data }, () => console.log(state.bus));
    };
  }
  
  render() {
    // only JSX
    return <div>...</div>
  }

这将确保您只有一个连接。

推荐阅读