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"
}

Answer 1

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

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的整体，而整体<?php $ldap = ldap_connect('ldap:foo.example.local ldap:bar.example.local'); if(!$ldap){ throw new RuntimeException(); } ldap_set_option($ldap, LDAP_OPT_PROTOCOL_VERSION, 3); ldap_set_option($ldap, LDAP_OPT_REFERRALS, 0); if(!ldap_bind($ldap, 'example\\lookup.user', 'passw0rd')){ throw new RuntimeException(); } $result = ldap_read($ldap, '', '(objectClass=*)', ['defaultNamingContext']); $info = ldap_get_entries($ldap, $result); if(isset($info[0]['defaultnamingcontext'][0])){ $base_dn = $info[0]['defaultnamingcontext'][0]; // E.g. 'DC=example,DC=local' }else{ throw new RuntimeException(); } $results = ldap_search($ldap, $base_dn, '(|(sAMAccountName=john.doe)(userPrincipalName=john.doe))'); if(!$results){ return new RuntimeException(); } $info = ldap_get_entries($ldap, $results); var_dump($info); ldap_close($ldap);的数组不断增大。如果要以这种方式发布，则必须遍历状态并分别记录每个状态。

Answer 2

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

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

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

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

尝试

if(tbox.data && tbox.data.length > 0){ .....}

从websocket数据提要中读取JSON数组

2 个答案: