关于Warning: setState(...): Can only update a mounted or mounting component. 警告的解决方案

最新推荐文章于 2021-04-27 13:59:42 发布

原创最新推荐文章于 2021-04-27 13:59:42 发布 · 792 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #react

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细解释了在React应用中，当切换路由时出现特定警告的原因，并提供了三种有效的解决方案，帮助开发者避免因组件卸载后仍尝试更新状态而导致的问题。

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.

关于react中切换路由时报以上警告，实际的原因是因为在组件挂载（mounted）之后进行了异步操作。

比如ajax请求或者设置了定时器等，而你在回调函数中进行了setState操作。

当你切换路由时，组件已经被卸载（unmounted）了，此时异步操作中回调函数还在执行，因此setState没有得到值。

解决的方式：

一、在卸载的时候对所有的操作进行清除（例如：abort你的ajax请求或者清除定时器）

二、设置一个flag，当unmount的时候重置这个flag，设置一个state:fetching

但是由于this.setState是异步的，这种方式不一定会起作用

but：可以设置一个同步参数

 _fetching = false
    componentDidMount() {
        this._fetching = true
        //在异步请求中有使用setState修改参数的地方
        if (this._fetching) {
            this.setState({
                ...
            })
        }
    }
    componentWillUnmount(){
        this._fetching = false  
        /清除该清除的定时器
    }

三、卸载异步操作设置状态

this.setState = (state,callback)=>{

return;

}

方法三重写setState方法，让浏览器不能发现组件卸载后还通过setState来修改状态，但实际上还是在组件卸载后修改了state

只是不再报警告，不代表问题已经解决

方法一和方法二思想相同，但不是所有项目的请求都是通过ajax的，所以更推荐方法二