Javascript 如何从套接字迭代多个值

我正在尝试从多个聊天室的套接字获取数据。我已经能够记录数据（使用

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

另一个控制台日志条目

---

常量值=…

分配一个局部变量。您不能像那样在

render（）

中引用它。为了使用

render（）

中的

componentWillMount（）

中的任何内容，您必须将其传递到

setState（{foo:something}）

中，并通过

this.state.foo

const values=…

访问它，从而分配一个局部变量。您不能像那样在

render（）

中引用它。要使用

render（）

中的

componentWillMount（）

中的任何内容，必须将其传递到

setState（{foo:something}）

中，并通过

this.state.foo

访问它。渲染函数的作用域中没有变量

值。此外，映射函数没有映射任何内容，您只是尝试在每次迭代中输出
值
。因此，请提供一个如何使用它的示例。渲染函数的范围内没有变量
值
。此外，map函数没有映射任何内容，您只是试图在每次迭代中输出
值
。因此，请提供一个如何使用它的示例，但我正在组件willmount中使用此.SetState
this.setState（prev=>{return{data:{…prev.data，…event.data}}}
当我试图通过
this.state.data
使用该数据时，我得到了一个错误
无法读取null的属性“data”
但我正在组件willmount中使用this.setState（prev=>{return data:{…prev.data，…event.data}}

。当我试图通过

this.state.data

使用该数据时，出现错误

无法读取null的属性“data”

{
  "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",
  }]
}