React异步请求数据出现setState(...): Can only update a mounted or mounting component...

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,仅当_isMountedtrue即还未被卸载,才执行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
}


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值