反应本机提取和componentDidMount

Question

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

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

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

未定义不是对象

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

Answer 1

由于fetch是异步的，因此您的视图将尝试呈现，并且正在寻找尚不存在的name 。 如果您愿意，可以在render方法中为此设置“ Loading...状态-

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>