React native fetch和componentDidMount

Question

我正在尝试获取一些数据并在渲染方法上显示：

constructor(props) {
   super(props);

   this.state = {
     job: {}
   }
}

componentDidMount() {
   fetch(API_URL).then((res) => res.json()).then((res) => this.setState({ job: res.job }));
}

render() {
   return (<Text>{this.state.job.name}</Text>)
}

但是当加载屏幕并且我尝试访问作业名称时会发生异常：

undefined不是一个对象

如何从API获取数据并正确呈现？谢谢。

Answer 1

由于fetch是异步的，你的视图将尝试渲染并正在寻找尚不存在的name。如果您希望使用Loading...方法，可以为此设置render状态，如下所示 -

render() {
  if (!this.state.job.name) {
    return (
      <div>Loading...</div>
    );
  }

  return (<Text>{this.state.job.name}</Text>);
}

Answer 2

fetch是异步的，第一个render将在状态设置之前发生。在那之前，this.state.job.name未定义。

但是，我认为您的错误实际上可能来自您处理响应的方式，并且您将this.state.job设置为undefined。请注意，即使在定义this.state.job.name之前，下面的代码也是异步的，但不会产生错误。

您需要确保正确处理响应并将this.state.job设置为对象，否则在尝试访问name属性时会出现异常。

class Test extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        job: {}
      };
    }

    componentDidMount() {
      setTimeout(() => this.setState({
        job: {
          name: "job"
        }
      }), 1000);
    }

    render() {
      return (<p>{this.state.job.name}</p>);
    }
}

ReactDOM.render(<Test/> , 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>