渲染来自套接字的响应

Question

我正在使用套接字连接到我的数据库。初始响应是消息列表。

我希望它显示这个消息列表，然后当然允许在下面添加更多消息。

我想我看到了这个问题。 JSON.parse 返回一个数组，我将它添加到数组中。所以在渲染中，代码期望“item”是一个对象，但它实际上是对象数组。

从套接字渲染这个初始数据/响应的正确方法是什么？

class Chat extends Component {
  constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }
  componentWillMount () {
    const socket = new WebSocket('ws://localhost:8000/chat/super/');
    socket.addEventListener('message', 
        event => {this.setState(prev=>({ 
            data: [...prev.data, event.data ? JSON.parse(event.data) : {}] 
    }))
    });

    socket.addEventListener('message', function (event) {
    console.log(event.data);
    // THIS data is the response, which I want to show as the immediate array
    });
    }
    render() 
    {
        return  <div>
  {this.state.data.map(item=>(
    <div key={item.timestamp}>
        <h1 key={item.handle}>{item.handle}</h1>
            <li key={item.message}>{item.message}</li>
        </div>))}
    </div>

    ;}
    }

export default connect()(Chat);

Answer 1

正如 Rei Dien 指出的那样，您有重复的事件侦听器，因此请删除第二个。此外，状态更改和数据提取应在componentDidMount 中完成，以便它们正确触发重新渲染。为了便于阅读，我还清理了您的代码。

class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount () {
    const socket = new WebSocket('ws://localhost:8000/chat/super/');

    socket.addEventListener('message', event => {
      // console.log(event)
      this.setState({
        data: [
          ...prev.data, 
          event.data ? ...JSON.parse(event.data) : {}
        ] 
      })
    });
   }

   render() {
     return  (
       <div>
         {this.state.data.map(item => (
           <div key={item.timestamp}>
             <h1 key={item.handle}>{item.handle}</h1>
             <li key={item.message}>{item.message}</li>
           </div>
          ))}
        </div>
      );
    }
  }

export default connect()(Chat);