关于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 ...
随机推荐
- 【AI】微软人工智能学习笔记(三)
微软R服务 01|开源的R R实际上是统计学的编程语言,主要作用是对数据挖掘,统计,分析,可视化,机器学习等. 02|微软R 03| HDInsight R Spark集群存储在azure blob ...
- kubectl基础支持
kubectl get deployment -n alpha kubectl get deployment *****-deployment -n alpha -o json kubectl rol ...
- Linux安装Broadcom无线驱动
参考https://blog.csdn.net/u012833250/article/details/52493806 首先查看自己的网卡型号,然后先执行sudo apt-get update 再根据 ...
- 3、iptables扩展及使用
iptables/netfilter netfilter: kernel framework,位于内核中的协议框架 iptables 是规则管理命令行工具 四表:filter, nat, mangl ...
- 【译】第42节---EF6-DbSet.AddRange & DbSet.RemoveRange
原文:http://www.entityframeworktutorial.net/entityframework6/addrange-removerange.aspx EF 6中的DbSet引入了新 ...
- 微信小程序--bind 和catch区别
冒泡事件,当点击最里面的事件的时候,外面有事件也会执行,如3>2>1, 点击2时,2>1, 点击 最外层时 1. 1. bind事件 2.catch事件 catch事件是一个单独的 ...
- np.split()和np.array_split()
来自:爱抠脚的coder np.split(): 该函数的参数要么按照数字划分(int),要么是按列表list划分:如果仅是输入一个int类型的数字,你的数组必须是均等的分割,否则会报错. np.ar ...
- 《剑指offer》第五十九题(滑动窗口的最大值)
// 面试题59(一):滑动窗口的最大值 // 题目:给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如, // 如果输入数组{2, 3, 4, 2, 6, 2, 5, 1}及滑动窗口的 ...
- QT json字符串生成和解析
1 QT json字符串生成和解析 1.1 QT Json解析流程 (1) 字符串转化为QJsonDocument QJsonParseError json_error; QJso ...
- openstack环境搭建常用命令
1,编辑/etc/selinux/config文件,关闭selinux SELINUX=disabled 2,清空iptables规则并保存 # iptables -F # service iptab ...