react报错：Can‘t perform a React state update on an unmounted component

最新推荐文章于 2023-11-21 20:19:54 发布

转载最新推荐文章于 2023-11-21 20:19:54 发布 · 474 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/u010565037/article/details/88716681

Vue/React/Angular 专栏收录该内容

16 篇文章

订阅专栏

在React开发中，遇到组件卸载后尝试更新状态的警告是常见的内存泄漏问题。当组件在异步操作如Ajax请求或定时器的回调中尝试setState时，若组件已被卸载，会导致此警告。解决方法包括在组件卸载时清理资源，如取消Ajax请求或清除定时器，或设置一个标志变量在unmount后阻止setState。此外，还可以直接在unmount时重写setState为不执行任何操作的方法。

在React开发中，我们可能经常会遇到这个一个警告：

Can't perform a React state update on an unmounted component. 
This is a no-op, but it indicates a memory leak in your application.

我们不能在组件销毁后设置state，防止出现内存泄漏的情况

关于react中切换路由时报以上错误，实际的原因是因为在组件挂载（mounted）之后进行了异步操作，比如ajax请求或者设置了定时器等，而你在callback中进行了setState操作。当你切换路由时，组件已经被卸载（unmounted）了，此时异步操作中callback还在执行，因此setState没有得到值。

解决的方式有两种：

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

componentDidMount = () => {
    //1.ajax请求
    $.ajax('你的请求',{})
        .then(res => {
            this.setState({
                aa:true
            })
        })
        .catch(err => {})
    //2.定时器
    timer = setTimeout(() => {
        //dosomething
    },1000)
}
componentWillUnMount = () => {
    //1.ajax请求
    $.ajax.abort()
    //2.定时器
    clearTimeout(timer)
}

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

componentDidMount = () => {
    this._isMounted = true;
    $.ajax('你的请求',{})
        .then(res => {
            if(this._isMounted){
                this.setState({
                    aa:true
                })
            }
        })
        .catch(err => {})
}
componentWillUnMount = () => {
    this._isMounted = false;
}

还有一种办法

componentDidMount = () => {
    $.ajax('你的请求',{})
    .then(res => {
        this.setState({
            data: datas,
        });
    })
    .catch(error => {
 
     });
}
componentWillUnmount = () => {
    this.setState = (state,callback)=>{
      return;
    };
}