1. Warning:
  2. setState(...): Can only update a mounted or mounting component.
  3. This usually means you called setState() on an unmounted component.
  4. This is a no-op.
  5. Please check the code for the xxx component.

关于react中切换路由时报以上错误,实际的原因是因为在组件挂载(mounted)之后进行了异步操作,比如ajax请求或者设置了定时器等,而你在callback中进行了setState操作。当你切换路由时,组件已经被卸载(unmounted)了,此时异步操作中callback还在执行,因此setState没有得到值。

解决的方式有两种:

一、在卸载的时候对所有的操作进行清除(例如:abort你的ajax请求或者清除定时器)

  1. componentDidMount = () => {
  2. //1.ajax请求
  3. $.ajax('你的请求',{})
  4. .then(res => {
  5. this.setState({
  6. aa:true
  7. })
  8. })
  9. .catch(err => {})
  10. //2.定时器
  11. timer = setTimeout(() => {
  12. //dosomething
  13. },1000)
  14. }
  15. componentWillUnMount = () => {
  16. //1.ajax请求
  17. $.ajax.abort()
  18. //2.定时器
  19. clearTimeout(timer)
  20. }

二、设置一个flag,当unmount的时候重置这个flag

  1. componentDidMount = () => {
  2. this._isMounted = true;
  3. $.ajax('你的请求',{})
  4. .then(res => {
  5. if(this._isMounted){
  6. this.setState({
  7. aa:true
  8. })
  9. }
  10. })
  11. .catch(err => {})
  12. }
  13. componentWillUnMount = () => {
  14. this._isMounted = false;
  15. }

三、最简单的方式(万金油)

  1. componentDidMount = () => {
  2. $.ajax('你的请求',{})
  3. .then(res => {
  4. this.setState({
  5. data: datas,
  6. });
  7. })
  8. .catch(error => {
  9.  
  10. });
  11. }
  12. componentWillUnmount = () => {
  13. this.setState = (state,callback)=>{
  14. return;
  15. };
  16. }

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

关于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. 【AI】微软人工智能学习笔记(三)

    微软R服务 01|开源的R R实际上是统计学的编程语言,主要作用是对数据挖掘,统计,分析,可视化,机器学习等. 02|微软R 03| HDInsight R Spark集群存储在azure blob ...

  2. kubectl基础支持

    kubectl get deployment -n alpha kubectl get deployment *****-deployment -n alpha -o json kubectl rol ...

  3. Linux安装Broadcom无线驱动

    参考https://blog.csdn.net/u012833250/article/details/52493806 首先查看自己的网卡型号,然后先执行sudo apt-get update 再根据 ...

  4. 3、iptables扩展及使用

    iptables/netfilter netfilter: kernel framework,位于内核中的协议框架 iptables  是规则管理命令行工具 四表:filter, nat, mangl ...

  5. 【译】第42节---EF6-DbSet.AddRange & DbSet.RemoveRange

    原文:http://www.entityframeworktutorial.net/entityframework6/addrange-removerange.aspx EF 6中的DbSet引入了新 ...

  6. 微信小程序--bind 和catch区别

    冒泡事件,当点击最里面的事件的时候,外面有事件也会执行,如3>2>1, 点击2时,2>1, 点击 最外层时 1. 1. bind事件  2.catch事件 catch事件是一个单独的 ...

  7. np.split()和np.array_split()

    来自:爱抠脚的coder np.split(): 该函数的参数要么按照数字划分(int),要么是按列表list划分:如果仅是输入一个int类型的数字,你的数组必须是均等的分割,否则会报错. np.ar ...

  8. 《剑指offer》第五十九题(滑动窗口的最大值)

    // 面试题59(一):滑动窗口的最大值 // 题目:给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如, // 如果输入数组{2, 3, 4, 2, 6, 2, 5, 1}及滑动窗口的 ...

  9. QT json字符串生成和解析

    1         QT json字符串生成和解析 1.1  QT Json解析流程 (1)  字符串转化为QJsonDocument QJsonParseError json_error; QJso ...

  10. openstack环境搭建常用命令

    1,编辑/etc/selinux/config文件,关闭selinux SELINUX=disabled 2,清空iptables规则并保存 # iptables -F # service iptab ...