React native fetch and 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>)
}

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

未定义不是对象

如何从 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>