javascript - Possible Unhandled Promise Rejection (id: 0): undefined is not an object ('prevComponentInstance._currentElement')

Question

In react native I am trying to get json data using axios.get(my_url_path), then I'm update my state with response.data to 'urldatabase' key ,if I trying to call this state key and read the data from the json that I got I get the error:

Possible Unhandled Promise Rejection (id: 0): undefined is not an object ('prevComponentInstance._currentElement').... 

my code is as follow:

  }
  constructor(props) {
    super(props);
    this.state = { userAnswer: '', count: 0, urldatabase: {} };
  }



  componentWillMount(){
    axios.get('my_url_path')
      .then(response => this.setState({urldatabase: response.data}));
  }
  render() {
    let num = this.state.count;
    console.log(this.state.urldatabase[num].book)
    const book = this.state.urldatabase[num].book
     return(
        <RiddleHeader headerText={book} />
)
}
}

Can anyone please explain why am I getting this error? what I done wrong if any?

Answer 1

Consider: In componentWillMount, what happens if the axios promise is rejected? Right: It's unhandled. You need a catch handler in there. The basic rule of promises: Always handle rejection or return the promise to the caller. In this case, since React won't do anything with it if you return the promise out of componentWillMount, you need to handle the error within componentWillMount.