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

2022-08-06 10:37:39

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indic

React开发中,我们可能经常会遇到这个一个警告:

  1. Can't perform a React state update on an unmounted component.

  2. 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;
    };
}

react报错:Can't perform a React state update on an unmounted component_u010565037的博客-CSDN博客在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,防止出现内存泄漏的情况关于re...https://blog.csdn.net/u010565037/article/details/88716681

  • 作者:shelleyHLX
  • 原文链接:https://shelleyhlx.blog.csdn.net/article/details/122733175
    更新时间:2022-08-06 10:37:39