关于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.的解决方案
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.的解决方案的更多相关文章
- 使用reactjs遇到Warning: setState(...): Can only update a mounted or mounting component.
前端数据大部分来源于后端,需要向后端发起异步请求,而在使用reactjs的时候,如果这个组件最初加载的时候就发起这个异步请求,然后在返回结果中进行setState({}),这时候有可能会遇到这个警告: ...
- React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法
做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setSta ...
- 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 ...
- 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 ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- 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 ...
- React源码解析:setState
先来几个例子热热身: ......... constructor(props){ super(props); this.state = { index: 0 } } componentDidMount ...
- 在React组件unmounted之后setState的报错处理
最近在做项目的时候遇到一个问题,在 react 组件 unmounted 之后 setState 会报错.我们先来看个例子, 重现一下问题: class Welcome extends Compone ...
随机推荐
- (转载)一张表搞清楚西门子S7系列标准DB块与优化DB块
在TIA Portal中为S7-1200/S7-1500 CPU 添加一个 DB 块时,其缺省属性为优化的 DB ,优化的 DB 块与标准的 DB 块整体对比如下表所示: 项 标准 DB 优化 DB ...
- URL简单梳理
# DEBUG模式: 开启debug模式后,修改项目代码时按下ctrl+s可重启项目: 项目中出现bug时,浏览器与控制台会打印错误信息: 在生产环境中禁止开启DEBUG模式,有很大的安全隐患: 将D ...
- PHP feof()函数
feof()函数检查是否已经到达文件末尾(EOF) EOF == end of file 如果出错或者文件指针到了文件末尾(EOF)则返回true,否则返回false 语法: feof(file) ...
- git项目,VSCode显示不同颜色块的含义
一. 概念 代码里的左侧颜色标识: 红色,未加入版本控制; (刚clone到本地) 绿色,已经加入版本控制暂未提交; (新增部分) 蓝色,加入版本控制,已提交,有改动: (修改部分) 白色,加入版本控 ...
- docker 日志分析
日志分两类,一类是 Docker 引擎日志:另一类是 容器日志. Docker 引擎日志 Docker 引擎日志 一般是交给了 Upstart(Ubuntu 14.04) 或者 systemd (Ce ...
- PHP 的命令行模式
php CLI SAPI 内置Web Server 从版本 4.3.0 开始,PHP 提供了一种新类型的 CLI SAPI(Server Application Programming Interfa ...
- web 常用颜色
1. 推荐链接 RGB颜色值与十六进制颜色码转换工具 Web上16种基本颜色名称 WEB标准颜色 2. 个人常用 除了三原色,还有 #daf1ef#4DBCB0#ccc
- Android SDK开发
目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace F ...
- 学习笔记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 ...
- QT新建工程编译出现"Moc'ing xxx.h..." 找不到文件或者error MSB6006: "cmd.exe" exited with code 3.
产生这个问题的原因是QT的头文件路径包含出错: (1)如果没有添加如图所示的路径,则添加后重新编译: (2)如果已经添加了,则删除后,重新添加,在重新编译: (3)或者在QT Project Sett ...