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

Posted 2023-02-22

【中文标题】无法访问 JavaScript 对象数组 (React.js) 中的属性

【英文标题】：Can not access properties in JavaScript object array (React.js)

【发布时间】：2017-09-04 08:58:47

【问题描述】：

我有一个 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 属性，因此返回未定义，但我可能完全错了.

谁能指出我正确的方向？

【参考方案1】：

这是因为你有一个异步请求，并且由于状态数组最初是空的，this.state.tubedata[0] 最初是未定义的

在使用 id 之前检查一下

<div><pre>this.state.tubedata.length > 0 && this.state.tubedata[0].id</pre></div>

class TubeStatus extends React.Component 
  constructor(props) 
    super(props);
    this.state =  'tubedata' : [] ;
  ;
  componentWillMount() 
    let component = this;
    
  ;
  render() 
    return (
      <div>Hello <pre>this.state.tubedata.length > 0 && this.state.tubedata[0].id</pre></div>
    );
  
 
ReactDOM.render(<TubeStatus/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【参考方案2】：

当您从 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>
    );
  

【讨论】：

想了很多。非常感谢！