javascript - 无法访问 JavaScript 对象数组 (React.js) 中的属性

Question

我有一个 React.js 组件，它从 componentDidMount() 中的 API 调用中提取其初始状态数据。数据是一个对象数组。

我能够使用 JSON.stringify(用于调试)查看数组和单个元素，但是当我尝试访问元素中的属性时，我收到一个错误，似乎暗示该元素未定义，尽管已经检查过它不是。

代码:

class TubeStatus extends Component {
  constructor(props) {
    super(props);
    this.state = { 'tubedata' : [] };
  };
  componentWillMount() {
    let component = this;
    axios.get('https://api.tfl.gov.uk/line/mode/tube/status')
    .then( function(response) {
      component.setState({ 'tubedata' : response.data });
    })
    .catch( function(error) {
      console.log(JSON.stringify(error, null, 2));
    });
  };
  render() {
    return (
      <div><pre>{this.state.tubedata[0].id}</pre></div>
    );
  }
}

错误:

Uncaught TypeError: Cannot read property 'id' of undefined

如果我使用 JSON.stringify() 来显示 this.state.tubedata，所有数据都在那里。

据我所知，我对 React.js 的了解有限，我怀疑这是因为 React.js 试图在 componentDidMount() 触发加载初始状态数据之前访问 .id 属性，从而返回未定义，但我可能完全错了.

谁能给我指出正确的方向？

Answer 1

当您从 API 调用中获取数据时，初始渲染数据不可用，因此您会收到错误。

this.state.tubedata.length>0// check if tubedata is available 

所以，

 render() {
    return (
      <div><pre>{this.state.tubedata.length>0?this.state.tubedata[0].id:null}</pre></div>
    );
  }