React-native中页面卸载后setState出现警告的解决办法

1.在使用react-native开发时经常出现这个警告:
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的代码导致的,有很多解决办法,一般就是加个isMount变量来判断是否卸载,但是这样挺麻烦的在每个页面都添加,我们可以用高阶组件来复用逻辑
2.我们可以定义一个ts模块

import *as React from 'react'
const SafeSetState = function<P extends object>(WrappedComponent:React.ComponentClass<P>) {
    return class SafeComponent extends WrappedComponent{
        private isMount:boolean
        componentDidMount(){
            this.isMount=true
            if(super.componentDidMount){
                super.componentDidMount()
            }
        }
        componentWillUnmount(){
            this.isMount=false
        }
        setState(state,callback?){
            if(this.isMount){
                super.setState(state,callback)
            }
        }

    }
};

export default SafeSetState

我们这种高阶组件方式叫反向继承,我们添加一个isMount属性,在setState时判断一下装填就OK了

其实还有其他高阶解决办法,可以参考这个大神的文章从一次react异步setState引发的思考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值