反应本机提取和componentDidMount

Question

I'm trying to fetch some data and display on render method:

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

But when the screen is loaded and I try to access the job name occurs an exception:

undefined is not an object

How can I fetch data from an API and render properly ? Thanks.

Answer 1

Since fetch is asynchronous, your view will try to render and is looking for name which does not exist yet. You can have a Loading... state for this if you wish in your render method, like so -

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

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

Answer 2

fetch is asynchronous, and the first render will occur before the state is set. Until then, this.state.job.name is undefined.

However, I think your error might actually come from the way you're handling the response, and that you're setting this.state.job to undefined. Note that the code below is asynchronous but produces no error, even before this.state.job.name is defined.

You need to make sure that you're handling your response correctly and setting this.state.job to an object, otherwise you will get an exception when you try and access the name property.

 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>