Javascript 从websocket数据源读取JSON数组

ReactJS-TypeError:无法读取未定义的属性“0”

this.ws.onmessage = e => {
  var tbox = JSON.parse(e.data);
  this.setState({
  user : this.state.usernames.concat(tbox.data[0].user),
  messages : this.state.messages.concat(tbox.data[0].message)
})
console.log(tbox.data[0].user + ': ' + tbox.data[0].html);

我试图从公共websocket api中实时解析、设置状态和显示数据（在Ant设计列表组件中）

我成功地走到了这一步，但如果有人能更好地帮助我朝着正确的方向前进，那将不胜感激

常量URL=wss://www.bitmex.com/realtime?subscribe=chat:1'
常数数据=[
{
用户：“BuytheDiplowers”，
留言：“我在这里什么都不等lol”，
时间：'4:20 AM'，/*TODO:让用户设置他们的时区*/
},
];
类框扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：[]，
信息：[]，
时间戳：[]，
}
}
ws=新WebSocket（URL）
componentDidMount（）{
this.ws.onopen=（）=>{
console.log（'已连接'）
}
this.ws.onmessage=e=>{
var tbox=JSON.parse（e.data）；
这是我的国家({
用户：this.state.usernames.concat（tbox.data[0].user），
消息：this.state.messages.concat（tbox.data[0].message）
})
console.log（tbox.data[0].user+'：'+tbox.data[0].html）；
}
this.ws.onclose=（）=>{
console.log（'断开连接'）
这是我的国家({
ws:newwebsocket（URL），
})
}
}
render（）{
返回(
(
)}
/>
...

console.log（tbox.data[0].user+'：'+tbox.data[0].html）；

显示了我希望在控制台中看到的内容，这对我来说是一个进步：

console.log（this.state.usernames+'：'+this.state.messages）；

尽管如此，与前一行不同的是，这一行将所有内容集中在一起，但仍然给了我一个错误：

编辑：JSON示例：

{ 
   "table":"chat",
   "action":"insert",
   "keys":[ 
      "id"
   ],
   "data":[ 
      { 
         "channelID":1,
         "date":"2019-11-27T07:20:30.862Z",
         "fromBot":false,
         "html":"Keepitreal: ok bruh\n",
         "id":43087881,
         "message":"Keepitreal: ok bruh",
         "user":"cryxix"
      }
   ],
   "filterKey":"channelID"
}

---

看看你在评论中提供的图片，这张： 显示您得到的前3个响应与您期望的响应不同，并且其中没有key called user，因此您会得到该错误。您可以通过添加条件来跳过它，如：

if(tbox.data){
      this.setState({
        user : this.state.usernames.concat(tbox.data[0].user),
        messages : this.state.messages.concat(tbox.data[0].message)
      })
}

关于你的第二个问题

尽管如此，与前一行不同的是，这一行将所有内容集中在一起，但仍然给了我一个错误：

---

这是因为您正在发布整个

This.state.usernames

，它作为一个数组不断增大。如果您想以这种方式发布，您必须循环浏览该状态并分别记录每个状态。

查看您在评论中提供的图像，这幅图像： 显示您得到的前3个响应与您期望的响应不同，并且其中没有key called user，因此您会得到该错误。您可以通过添加条件来跳过它，如：

if(tbox.data){
      this.setState({
        user : this.state.usernames.concat(tbox.data[0].user),
        messages : this.state.messages.concat(tbox.data[0].message)
      })
}

关于你的第二个问题

尽管如此，与前一行不同的是，这一行将所有内容集中在一起，但仍然给了我一个错误：

这是因为您正在发布整个

This.state.usernames

，它作为一个数组不断增大。如果您想以这种方式发布，您必须循环遍历该状态并分别记录每个状态。

“This.ws.onmessage”处理来自另一个端点的每条消息，因此必须确保代码能够处理可能发生的每一种情况

第一次出现没有tbox.data的json时，tbox.data未定义，因此出现错误“无法读取未定义的属性“0”

第二次错误是“无法读取未定义的属性'user'，因此tbox.data未定义，但tbox.data[0]未定义。我认为tbox.data是一个空数组（数据：[]）

如果要使用tbox.data[0]。用户，请检查tbox.data[0]是否未定义

试一试

“this.ws.onmessage”处理来自另一个端点的每一条消息，因此您必须确保您的代码能够处理可能发生的每一种情况

第一次出现没有tbox.data的json时，tbox.data未定义，因此出现错误“无法读取未定义的属性“0”

第二次错误是“无法读取未定义的属性'user'，因此tbox.data未定义，但tbox.data[0]未定义。我认为tbox.data是一个空数组（数据：[]）

如果要使用tbox.data[0]。用户，请检查tbox.data[0]是否未定义

试一试

---

请发布您的json数据样本。@PrabhJotsinghkaint我编辑了这个问题！请尝试控制台tbox变量，看看它是否返回数据。请发布您的json数据样本。@PrabhJotsinghkaint我编辑了这个问题！请尝试控制台tbox变量，看看它是否返回数据。抱歉，我输入了一个错误，并在您看到之前试图编辑它它，它应该读

if（tbox.data）

not

tbox.user

对不起，我打了个错别字，在你看到它之前试图编辑它，它应该读

if（tbox.data）

not

tbox.user