react-router那些事儿
切换路由时,控制台警告
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那些事儿的更多相关文章
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [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 ...
- [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 ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
随机推荐
- 【sqli-labs】Less5~Less6
双注入原理: 来源: http://www.myhack58.com/Article/html/3/7/2016/73471.htm (非常详细的说明了原理,good) http://www.2cto ...
- MongoDB----提升
文档之间的联系 一对一:通过文档内嵌的形式体现一对一的关系 db.user.insert({name:"xiaoming",frind:{name:"xiahua&quo ...
- cf861D 字典树+时间戳
好久没碰字典树之类的题了,搞起来有点生疏 /* 把所有母串的后缀加入字典树中 然后再扫一次所有母串的后缀,把后缀放到字典树中查询,找到第一个访问次数为1的结点返回即可 num在计数时,同一个母串的子串 ...
- POJ 1064 Cable master (二分法+精度控制)
Cable master Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 65358 Accepted: 13453 De ...
- Linux发布WebApi
一:WebApi 使用Owin来做 http://www.cnblogs.com/xiaoyaodijun/category/666029.html 二:安装最新版的Jexus服务 https:// ...
- 卸载win10内置的onenote
powershell命令如下 get-appxpackage *onenote* | remove-appxpackage
- OpenJDK-study-001 windows上安装Mercurial 4.4.1 克隆OPENJDK版本库
下载安装 1.下载Mercurial 进入https://www.mercurial-scm.org/wiki/Mercurial下载,windows上傻瓜式安装的,安装好之后,命令行进入安装目录, ...
- Ncurses - Panel
当你需要创建许多窗口时,你很快就会发现它们会变得难以管理.Panel library提供了很好的解决方案. Panel 实际上是一个窗口,通过容器 - 栈 来管理,栈顶的 panel 是完全可见的,其 ...
- $_FILES["file"]["error"]是错误代码
$_FILES["file"]["error"]是错误代码,0表示没有错误,下面几种对应不同的错误1 : 上传的文件超过了 php.ini 中 upload_m ...
- Spring Boot配置文件放在jar外部
Spring Boot程序默认从application.properties或者application.yaml读取配置,如何将配置信息外置,方便配置呢? 查询官网,可以得到下面的几种方案: 通过命令 ...