如何从socket中迭代多个值

Question

我正在尝试从多个聊天室的套接字中获取数据。我已经能够记录数据（使用event.data），但我在返回时表示数据时遇到问题。

我尝试使用两个地图（一个用于获取聊天室名称，一个用于获取其消息列表）。这是如何实现的？

const MessageSocket = new WebSocket('ws://localhost:8000/chat');

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

  componentWillMount() {
    MessageSocket.addEventListener('message', event => {
      console.log('one at a time', event.data)
      this.setState(prev => { 
        return {
          data: { ...prev.data, ...event.data }
        }
      });
      const values = Object.values(JSON.parse(event.data))
      console.log(values)
    });
   }

  render() {
    return (
      <div>
          The room title is: {values.map(e => <h2>{values}</h2>)}
      </div>
    );
  }
}

数据（它是console.logs每个单独的）

{
  "Room 1": [{
    "pk": 1,
    "message": "Hi",
    "handle": "Foo",
  }, {
    "pk": 2,
    "message": "Hello",
    "handle": "Bar",
  }]
}

另一个控制台日志条目

{
  "Room 2": [{
    "pk": 1,
    "message": "See ya",
    "handle": "Bob",
  }, {
    "pk": 2,
    "message": "Laters",
    "handle": "Pete",
  }]
}

Answer 1

const values = …分配一个局部变量。您不能在render()中引用它。要使用componentWillMount() render()中的任何内容，您必须将其传递到setState({foo: something})并通过this.state.foo访问它。