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设置为未定义。请注意，下面的代码是异步的，但即使在定义this.state.job.name之前也不会产生错误。

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

＆＃13;

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

＆＃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;

React native fetch和componentDidMount

2 个答案: