javascript - 返回数组迭代

Question

我有以下组件，我在其中提取一些 JSON，并尝试使用 { this.state.data.items[0]} 获取一些嵌套信息，但是我得到错误:未捕获类型错误:无法读取未定义的属性“0”，尽管 {this.state.data} 和 {this.state.data.items} 也有效

完整代码如下:

var Box = React.createClass({
      getInitialState: function () {
    return {data: []};
  },
  loadStuffFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
        console.log(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadStuffFromServer();
    setInterval(this.loadStuffFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div>
        { this.state.data.items[0]}
      </div>
    );
  }
});

Answer 1

你的getInitialState应该看起来像这样

getInitialState: function () {
    return { 
       data: {
          items: []
       } 
    };
},

因为 render 在 componentDidMount 之前调用，您正在尝试从 state.data 获取属性 items 但这属性不存在

this.state.data       // => returns empty Array

那么您正在尝试获取属性items

this.state.data.items // => returns undefined

因为data没有属性items。，

然后您尝试从 items Array 获取第一个元素，但之前的语句返回 undefined，这就是您收到 Error< 的原因，因为您无法从 undefined 值获取属性