javascript - 如何从套接字迭代多个值

Question

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

我尝试使用两张 map (一张用于获取聊天室名称，一张用于获取其消息列表)。这是如何实现的？

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

数据(它分别控制台并记录每个数据)

{
  "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 value = ... 分配一个局部变量。您不能像这样在 render() 中引用它。为了在 render() 中使用 componentWillMount() 中的任何内容，您必须将其传递给 setState({foo: Something}) 并通过 this.state.foo 访问它。