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.

关于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;
};
}

以上几种方法是借鉴大佬的,这里总结一下,做个笔记。

关于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.的解决方案的更多相关文章

  1. 使用reactjs遇到Warning: setState(...): Can only update a mounted or mounting component.

    前端数据大部分来源于后端,需要向后端发起异步请求,而在使用reactjs的时候,如果这个组件最初加载的时候就发起这个异步请求,然后在返回结果中进行setState({}),这时候有可能会遇到这个警告: ...

  2. React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

    做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setSta ...

  3. React篇-报错信息:warning: Can't call setState (or forceUpdate) on an unmounted component.

    报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...

  4. Can’t call setState (or forceUpdate) on an unmounted component 警告处理方法

    Can’t call setState (or forceUpdate) on an unmounted component Warning: Can't call setState (or forc ...

  5. 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

    意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...

  6. 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

    意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...

  7. 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. To fix,

    今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:co ...

  8. React源码解析:setState

    先来几个例子热热身: ......... constructor(props){ super(props); this.state = { index: 0 } } componentDidMount ...

  9. 在React组件unmounted之后setState的报错处理

    最近在做项目的时候遇到一个问题,在 react 组件 unmounted 之后 setState 会报错.我们先来看个例子, 重现一下问题: class Welcome extends Compone ...

随机推荐

  1. LuoguP2161 [SHOI2009]会场预约

    题目地址 题目链接 题解 用fhqtreap对区间进行维护. 可以注意到的是,对于当前存在的预约,他们一定是升序排列的(有重叠的都被删了). 那么就可以用按照位置分裂的fhqtreap搞了(预约无论按 ...

  2. C# winform combobox默认选中项方法

    https://blog.csdn.net/easyboot/article/details/68062196 可以使用 Combobox.SelectText = “默认选中文本”; 但是如果Com ...

  3. 常用for循环和for in 以及for of 的区别

    用Es6对象扩展运算符(…)与rest运算符说明 function test(first,...a){ for(let val=0; val<a.length;val++){ console.l ...

  4. Codeforces-Anastasia and pebbles

    这是一道很有意思的(水)题. 地址戳:http://codeforces.com/problemset/problem/789/A 题目的大意呢,就是一个可爱的大姐姐的故事.说是啊,她每天都带着两个一 ...

  5. PTA 7-2 二叉搜索树的结构(30 分)

    7-2 二叉搜索树的结构(30 分) 二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值:若它的右子树不空,则右子树上所有结点的值均大 ...

  6. pyqt笔记1模块 信号和插槽

    资料 PyQt5图形界面编程 PyQt5指南 模块 PyQt5本身拥有超过620个类和6000函数及方法. QtCore模块涵盖了包的核心的非GUI功能,此模块被用于处理程序中涉及到的 time.文件 ...

  7. SAP FI CO模块常用事务代码

                                                                                                        ...

  8. java虚拟机知识和 内存 堆(heap)、栈(stack)和方法区(method)

    1.虚拟机实例 每个java程序都运行在自己的java虚拟机实例中,运行三个java程序就会得到三个虚拟机实例 守护线程(虚拟机自己使用,比如说执行垃圾收集任务的线程) 非守护线程(java初试线程, ...

  9. 突变注释工具SnpEff,Annovar,VEP,oncotator比较分析--转载

    https://www.jianshu.com/p/6284f57664b9 目前对于variant进行注释的软件主要有4个: Annovar, SnpEff, VEP(variant Effect ...

  10. _itemmod_currency_like

    设置物品掉落模式为货币类型功能:掉落的时候 所有人都可以拿,就像公正徽章,每个人都会获得一个.小技巧:配合DBC使用,可以将该道具其显示在角色栏的货币中.1.转存item_template,在item ...