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. (转载)一张表搞清楚西门子S7系列标准DB块与优化DB块

    在TIA Portal中为S7-1200/S7-1500 CPU 添加一个 DB 块时,其缺省属性为优化的 DB ,优化的 DB 块与标准的 DB 块整体对比如下表所示: 项 标准 DB 优化 DB ...

  2. URL简单梳理

    # DEBUG模式: 开启debug模式后,修改项目代码时按下ctrl+s可重启项目: 项目中出现bug时,浏览器与控制台会打印错误信息: 在生产环境中禁止开启DEBUG模式,有很大的安全隐患: 将D ...

  3. PHP feof()函数

    feof()函数检查是否已经到达文件末尾(EOF) EOF == end  of  file 如果出错或者文件指针到了文件末尾(EOF)则返回true,否则返回false 语法: feof(file) ...

  4. git项目,VSCode显示不同颜色块的含义

    一. 概念 代码里的左侧颜色标识: 红色,未加入版本控制; (刚clone到本地) 绿色,已经加入版本控制暂未提交; (新增部分) 蓝色,加入版本控制,已提交,有改动: (修改部分) 白色,加入版本控 ...

  5. docker 日志分析

    日志分两类,一类是 Docker 引擎日志:另一类是 容器日志. Docker 引擎日志 Docker 引擎日志 一般是交给了 Upstart(Ubuntu 14.04) 或者 systemd (Ce ...

  6. PHP 的命令行模式

    php CLI SAPI 内置Web Server 从版本 4.3.0 开始,PHP 提供了一种新类型的 CLI SAPI(Server Application Programming Interfa ...

  7. web 常用颜色

    1. 推荐链接 RGB颜色值与十六进制颜色码转换工具 Web上16种基本颜色名称 WEB标准颜色 2. 个人常用 除了三原色,还有 #daf1ef#4DBCB0#ccc

  8. Android SDK开发

    目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace F ...

  9. 学习笔记14—Python error集

    1.Can't broadcast input array from shape (3,1) into shape (3,) resolution:    V[k:m,k] = v; v has sh ...

  10. QT新建工程编译出现"Moc'ing xxx.h..." 找不到文件或者error MSB6006: "cmd.exe" exited with code 3.

    产生这个问题的原因是QT的头文件路径包含出错: (1)如果没有添加如图所示的路径,则添加后重新编译: (2)如果已经添加了,则删除后,重新添加,在重新编译: (3)或者在QT Project Sett ...