从websocket数据供稿读取JSON数组

Question

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 Design List组件中）。>

我设法取得了进展，但是如果有人可以更好地帮助我朝正确的方向发展，那将不胜感激！

const URL = 'wss://www.bitmex.com/realtime?subscribe=chat:1'

const data = [
  {
    user: 'buythediplosers',
    message: 'im over here waiting for nothing lol',
    time: '4:20 AM', /*TODO: let the user set their timezone*/
  },
];


class Trollbox extends Component {
  constructor(props) {
    super(props);
    this.state = {
        usernames: [],
        messages: [],
        timestamps: [],
    }
  }

  ws = new WebSocket(URL)

  componentDidMount() {
    this.ws.onopen = () => {
      console.log('connected')
    }

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

    this.ws.onclose = () => {
      console.log('disconnected')
      this.setState({
        ws: new WebSocket(URL),
      })
    }
  }

  render() {
    return (
      <div>
        <div>
          <List
            itemLayout="horizontal"
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  description={
                    <div>
                      <p>
                        <b>{item.user}</b>: {item.message} {item.time}
                      </p>
                    </div>
                  }
                />
              </List.Item>
            )}
          />
        </div>
...
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"
}

ReactJS-TypeError：无法读取未定义的this.ws.onmessage = e =>的属性'0'。{var tbox = JSON.parse（e.data）; this.setState（{user：this.state.usernames.concat（tbox.data [0] .user），...

Answer 1

查看您在评论中提供的图像，此图像：表明您得到的前三个响应与您期望的不同，并且其中没有名为key的用户，因此您为什么会得到此错误。您可以通过添加条件来跳过它：