Warning:
setState(...): Can only update a mounted or mounting component.
This usually means you called setState() on an unmounted component.
This is a no-op.
Please check the code for the xxx component.
大概意思就是我们可能对一个没有装载的组件执行了setState()操作,在React的官网里有一个解决这个办法的方案,isMounted
原因:
Such situations most commonly occur due to callbacks,
when a component is waiting for some data and gets unmounted before the data arrives.
Ideally, any callbacks should be canceled in componentWillUnmount, prior to unmounting.
大概意思是这种情况会出现在callback
中,我们的异步请求返回数据之前,组件可能就已经被卸载了,等数据回来再使用setState
就会报出上面的警告,所以我们应该手动在componentWillUnmount
里去取消callback
在它被unmounting
之前。
解决办法:
Just set a _isMounted property to true in componentDidMount
and set it to false in componentWillUnmount, and use this variable to check your component's status.
很好理解,我们使用一个标志位_isMounted
,在componentDidMount
里设置为true
,在componentWillUnmount
里设置为false
,仅当_isMounted
为true
即还未被卸载,才执行setState()
。
我的代码:
componentWillMount() {
this._isMounted = true
fetch('网络请求').then (status, response)=>{
if (this._isMounted) {
this.setState({
activityTipsImg: response.data.tips_url,
activityTipsContent: response.data.tips_content
})
}
});
}
componentWillUnmount() {
this._isMounted = false
}