切换路由时,控制台警告

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 State component.

前端发了一个异步请求,在异步请求的回调中使用this.setState方法;当异步请求发送后接口数据还没返回期间,做了路由切换的操作,于是上一个react组件就被销毁了。但是这时,刚才向后台发送的异步请求却在这时返回了,于是执行this.setState方法,但是,这个组件的生命周期已经结束,被销毁了,于是就出现这样的警告。总之,是因为组件被销毁了,又执行了this.setState方法。

解决方案:

自己维护一个_isMounted,在componentDidMount回调中设置为true,在componentWillUnmount设置为false,就可以判断销毁状态了。

if (this._isMounted) {
this.setState({});
}

官网说,这个警告为了帮助开发者捕捉bug,当你销毁组件后,又调用了this.setState方法,表明你的组件很有可能未正常清理,可能造成内存泄漏。

路由刷新,404,借助服务器配置。express,nginx。

react-router那些事儿的更多相关文章

  1. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  2. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  3. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  4. [Redux] Adding React Router to the Project

    We will learn how to add React Router to a Redux project and make it render our root component. Inst ...

  5. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  6. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  7. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  8. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  9. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  10. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

随机推荐

  1. LeetCode(112):路径总和

    Easy! 题目描述: 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及 ...

  2. Gson将字符串转map时,int默认为double类型

      gson能够将json字符串转换成map, 但是在转成map时, 会默认将字符串中的int , long型的数字, 转换成double类型 , 数字会多一个小数点 , 如 1 会转成 1.0 Gs ...

  3. SpringMVC 框架完成图片上传到项目路径操作

    /** * 保存添加 * * @return */ @RequestMapping(value = "taizhang/add.action", method = { Reques ...

  4. 20165206 2017-2018-2 《Java程序设计》第9周学习总结

    20165206 2017-2018-2 <Java程序设计>第9周学习总结 教材学习内容总结 URL类:URL类是java.net包中的一个重要的类,使用URL创建对象的应用程序称为客户 ...

  5. ubuntu中vim下按上下左右键时输入A、B、C、D

    ubuntu系统自带的 vi 不完整导致,解决方法:安装完整的vi $ sudo apt-get install vim-gtk 1. 为root用户设置密码 sudo passwd root 需要先 ...

  6. Beyond-Compare 4 -linux 破解

    key失效了可以去https://www.serials.be/serial/Beyond_Compare_4_Linux_68803632.html生成 Crack-Beyond-Compare-l ...

  7. java 使用jdbc连接Greenplum数据库和Postgresql数据库

    1.公司使用的Greenplum和Postgresql,确实让我学到不少东西.简单将使用jdbc连接Greenplum和Postgresql数据库.由于使用maven仓库,不能下载Greenplum的 ...

  8. Linux-GLIBCXX版本过低导致编译错误--version `GLIBCXX_3.4.20' not found

    最近在CentOS6.2上安装protobuf2.4.1,编译的时候出现如下错误: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not fo ...

  9. Java基础知识➣Stream整理(二)

    概述 在Java数据流用到的流包括(Stream).文件(File流)和I/O流 ,利用该三个流操作数据的传输. Java控制台输入输出流 读取控制台使用数据流: BufferedReader和Inp ...

  10. ERROR 000732:Output Geodatabase:Dataset Database Connections\Connection to localhost.sde\SDE.Dataset does not exist or is not supported

    ArcCatalog 10中向SDE 数据集导入要素类时,出错:ERROR 000732:Output Geodatabase:Dataset Database Connections\Connect ...