Question

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

我能够使用JSON.stringify（用于调试）查看数组和单个元素，但是当我尝试访问元素中的属性时，我得到一个错误，这似乎意味着该元素是undef，尽管我已经检查过它不是。

代码：

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知之甚少的情况下，我怀疑这是因为React试图在componentDidMount（）触发加载初始状态数据之前访问.id属性，因此返回undef，尽管我可能完全错了。

任何人都能指出我正确的方向吗？

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

Answer 2

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

在使用id

之前请先检查一下

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

＆＃13;

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

＆＃13;

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

＆＃13;

无法访问JavaScript对象数组中的属性（React）

2 个答案: