Question

有些事情我无法弄清楚。这是一个基于React类的基本组件，从端点获取一些数据：

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  state = { info: {} };

  componentDidMount() {
    fetch('https://api.spacexdata.com/v2/info')
      .then(response => response.json())
      .then(data => {
        const info = data;
        this.setState(() => ({ info }));
      });
  }

  render() {
    return (
      <div>
        {/* the first h1 renders just fine */}
        <h1>{this.state.info.name}</h1>
        {/* the second throws an error: Cannot read property 'address' of undefined */}
        <h1>{this.state.info.headquarters.address}</h1>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

为什么第二个h1标签给我未定义？我检查了反应开发工具中的状态，数据就在那里......它实际上是一个对象，其中有另一个对象...如果我复制粘贴同一个对象进入状态它渲染得很好......

Answer 1

问题是承诺的异步性质，当你第一次渲染组件时，你开始承诺但是它需要一些时间来执行和解决，所以它还没有返回JSON。这意味着信息仍然是{}当你尝试渲染你的H1

时

<h1>{this.state.info.headquarters.address}</h1>

您将收到未定义的错误。因为this.state.info.headquarters未定义，所以在promise解析之前你不能访问.address（记住它们是异步的）

用这个（或类似的东西）替换你的初始状态

state = { info: {headquarters:{address:'loading...'} };

你会没事的。

React状态中对象内的对象返回undefined

1 个答案: