【原创】解决React Native报错:Warning: setState(...): Can only update a mounted or mounting component

blogdaren 2018-08-16 抢沙发 497人次

问题背景

这个报错经常出现在我们使用诸如 React-Native-Navigation 组件切换导航或路由时的场景,似乎每个RN开发者都有此经历,频发高地。

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.

问题原因

正如提示描述那样:RN禁止对已经卸载的组件进行setState。一般我们切换路由时,组件已经被卸载,而你可能早前触发了诸如定时器这样的异步行为,此时定时器这个异步行为操作的正是已经卸载的组件,自然也就报错啦。

解决方案

设置一个状态开关变量,组件加载时打开变量,组件卸载时关闭变量,然后只有在打开变量时才执行setState()方法。

代码原型

componentDidmount() {
    this.hasMounted = true;
}   

componentWillUnmount() {
    this.hasMounted = false;
}   

doSomething() {
    if(this.hasMounted){
        this.setState({
            username: '', 
        }); 
    }   
}


版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

本文链接:【原创】解决React Native报错:Warning: setState(...): Can only update a mounted or mounting component

发表评论:

您的昵称:
电子邮件:
个人主页: