美文网首页
React异步请求数据出现setState(...): Can

React异步请求数据出现setState(...): Can

作者: sml_tj | 来源:发表于2019-03-01 09:18 被阅读0次
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
}

转自:https://www.jianshu.com/p/a9d1f5aa719a

相关文章

网友评论

      本文标题:React异步请求数据出现setState(...): Can

      本文链接:https://www.haomeiwen.com/subject/yveruqtx.html