可能的未处理承诺拒绝 (id： 0)： undefined 不是对象 ('prevComponentInstance._currentElement')

Question

在react native中，我试图使用axios.get(my_url_path)获取json数据，然后我用response.data将我的状态更新为'urldatabase'密钥，如果我试图调用这个状态密钥并从我获得的json中读取数据，我会得到错误：

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

我的代码如下：

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

有人能解释一下我为什么会出现这个错误吗？我做错了什么？

Answer 1

考虑一下：在componentWillMount中，如果axios承诺被拒绝会发生什么？右图：这是未处理的。你需要一个catch处理程序。承诺的基本规则：始终处理拒绝或将承诺返回给调用者。在这种情况下，如果您从componentWillMount中返回promise，React将不会对其执行任何操作，因此您需要在componentWillMount中处理错误。

Answer 2

像这样重写代码，并检查它是否再次发生。

}   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] && this.state.urldatabase[num].book; // this code can avoid undefined error
return(
<RiddleHeader headerText={book} /> ) } }