React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setState时无法找到渲染组件。

解决办法特别简单,在离开页面时的周期函数(componentWillUnmount)中:

  //组件将被卸载
  componentWillUnmount(){
        //重写组件的setState方法,直接返回空
        this.setState = (state,callback)=>{
          return;
        };
    }

再来回切换页面以后,只要页面离开就会执行该方法,当页面再次进入时又会重新挂载父组件的setState方法,从而不影响页面的渲染。

不过该方法不是很严谨,在集成的子组件中能修改父组件的setState方法,不过在javascript的语法中很适用,建议只在出现上述bug的页面中使用。

时间: 2024-10-10 09:32:03

React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法的相关文章

aspx在页面跳转(Response.Redirect)时丢失session问题及解决办法

[问题描述] 假设a.aspx.cs页面保存有Session["empid"]="3",当a.aspx.cs通过Response.Redirect("b.aspx")到达b.aspx页面后,b.aspx.cs获取到的Session["empid"]为null [解决思路]目前没有找到比较好的方法,暂时的处理方式是:在a.aspx页面跳转到b.aspx时,将session的值传过去,b.aspx页面接收到之后将该值更新到sess

php工程部署在centos系统,产生页面布局错乱、点击按钮和链接无响应的解决办法(去BOM头)

1.UTF-8 BOM 可能导致CSS样式错乱: utf-8 是一种在web应用中经常使用的一种 unicode 字符的编码方式,使用 utf-8 的好处在于它是一种变长的编码方式,对于 ANSII 码编码长度为1个字节,这样的话在传输大量 ASCII 字符集的网页时,可以大量节约网络带宽. 使用 utf-8 编码来编写网页的时候, 往往会因为 bom (Byte Order Mark) 的问题,导致网页中经常出现一些不明的空行或者乱码字符. 这些都是因为 utf-8 编码方式对于 bom 不是

(Chrome42)Lodop页面总提示“未安装”或“请升级”的可能原因和解决办法

Chrome42之后版本,支持NP插件默认处于关闭状态,要手工打开,方法如下: 在谷歌浏览器地址栏输入: chrome://flags/#enable-npapi 然后找到"启用NPAPI"地方看到处于启用状态. 另外64位Chome不支持js方式访问NP插件,所以目前也不能使用lodop.

webpack+react+antd 单页面应用实例

webpack+react+antd 单页面应用实例 React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给

React 蚂蚁金服+ Antd 组件使用技巧

安装antd 组件 yarn add antd -D import {  Card,Button,Table,From,Modal ,Select  } from 'antd'; .引入就可以使用了 使用组件的好处 所有的引入标签和 都是 可变的单双表格格式  自身带着很多的属性.方法    足够平时的使用 举例子 Vue 和 React中最大差别的   双向数据绑定和  单向数据流: 那么Vue是不需要获取value值得,只需要简单的bind 就可以拿到 而,React中是单向的  得通过re

十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1.在项目根目录安装antd[每个项目都安装一次]: npm install antd --save / yarn add antd / cnpm install antd --save 2.在您的react项目的css文件中引入Antd的css[会引入所有css样式]: @import '

记一次webpack4+react+antd项目优化打包文件体积的过程

背景 最近自己整了一个基于webpack4和react开发的博客demo项目,一路整下来磕磕碰碰但也实现了功能,就准备发到阿里云上面去看看,借用了同事的阿里云小水管服务器,配置完成之后首页加载花了十几秒,打开控制台network查看资源,打包的js体积有将近6M,及其影响访问体验,于是就开始了优化的路. 原因和解决方法 在webpack的配置文件中,对公共js做了抽取,分别会打包出react-verdor.js和antd-verdor.js,优化前的antd-verdor足足有4m大小,估计是把

浅谈react受控组件与非受控组件

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值.具体编辑页面中文本框相关的代码如下:         ... //render方法上面的内容省略  <FormItem       label="问题描述:"       hasFeedback      {...props.formItemLayout}  &g

react 动态组件加载器

在进行react项目,特别是后台管理的项目开发中,表单.提示框等弹出组件的应用是相当广泛的. 而这些弹框组件的状态比如开启.关闭以及内部显示的内容通常都要依靠父级组件的state进行管理. 但是当在一个页面组件中大量的使用到这些弹框的时候,对他们的状态管理会有非常严重的问题,每一个弹框组件都需要相应的state状态控制,这些状态信息一个一个的积累下来会造成state对象的异常臃肿,对代码的维护管理有很大的负面影响. 为了解决这个问题,最好不要将这些组件写死在父级组件里面,不用state状态控制打