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. LOJ6282 数列分块入门6(分块+暴力)

    真是暴力 #include <cstdio> #include <algorithm> #include <cstring> #include <vector ...

  2. 深度学习课程笔记(八)GAN 公式推导

    深度学习课程笔记(八)GAN 公式推导 2018-07-10  16:15:07

  3. 【ASP.NET】System.Web.Routing - PageRouteHandler Class

    用于提供一些属性和方法来定义如何将URL匹配到一个物理文件上面. public PageRouteHandler (string virtualPath, bool checkPhysicalUrlA ...

  4. Dockerize PostgreSQL

    Dockerize PostgreSQL Installing PostgreSQL on Docker Assuming there is no Docker image that suits yo ...

  5. CAS 单点登录4.24版本 登录调用其它系统并且返回客户端用其它的用户信息改造

    1.登录调用其它系统.修改deployerConfigContext.xml <?xml version="1.0" encoding="UTF-8"?& ...

  6. HttpUrlConnection底层实现和关于java host绑定ip即时生效的设置及分析

    最近有个需求需要对于获取URL页面进行host绑定并且立即生效,在java里面实现可以用代理服务器来实现:因为在测试环境下可能需要通过绑定来访问测试环境的应用实现代码如下: public static ...

  7. VC.【转】采用_beginthread/_beginthreadex函数创建多线程

    https://blog.csdn.net/cbnotes/article/details/8331632 还可以看这个网址的内容:[多线程]VC6使用_beginthread开启多线程的方法-技术宅 ...

  8. Grunt、Gulp区别 webpack、 requirejs区别

    1. 书写方式 grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等.而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候 ...

  9. mint fcitx搜狗输入法不显示输入框,其他输入法丢失皮肤

    mint18.3 因为这个原因刚刚重装过,结果一不留神又这样了. 这次原因相对清晰: 双屏显示下,合屏睡眠,打开之后,发现卡死了.屏幕分辨率改变了似的. 然后再重启,发现输入法悬浮框变大了,然后输入法 ...

  10. 牛客网NOIP赛前集训营-提高组(第一场)B 数数字

    数数字 思路: 数位dp 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #include< ...