切换路由时,控制台警告

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. python 之面向对象的三大特性

    面向对象的三大特性 继承 继承和组合 继承进阶 封装 封装(有待完善) 多态 多态

  2. vue之node.js的简单介绍

    一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...

  3. Nginx的进程模型及高可用方案(OpenResty)

    1. Nginx 进程模型简介 Nginx默认采用多进程工作方式,Nginx启动后,会运行一个master进程和多个worker进程.其中master充当整个进程组与用户的交互接口,同时对进程进行监护 ...

  4. 将本地代码通过git命令上传到github的流程

    首先在项目根目录打开命令行或者直接打开git-bash转到项目根目录下 1.创建本地仓库 $ git init 初始化本地仓库 $ git add --all 将项目文件添加到跟踪列表 $ git c ...

  5. hdu1811 拓扑排序+并查集缩点

    /*给定两个点之间的三种关系 = < >如果是=就将两点放到同一个集合里进行缩点 离线处理所有关系,先用并查集将等于关系缩成一个点 */ #include<bits/stdc++.h ...

  6. Go如何正确的使用mysql driver

    具体文章查看: https://xiequan.info/go%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E7%9A%84%E4%BD%BF%E7%94%A8mysql- ...

  7. shell 按序删除文件

    一.按时间排序 cd /data/wosbak/hrs/pre/ && ls -A -t | awk '{if(NR>15){print $9}}' | xargs rm -rf ...

  8. Loadrunner11.0 录制手机App脚本的方法二

    lr11安装一个移动补丁以后,就可以支持抓包文件直接转换为http/html协议的脚本.下面简单说一下过程. 1.工作思路:手机连接可上外网wifi,在手机wifi中设置本机ip的网络地址,然后在本机 ...

  9. Python列表去重复元素

    比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还有一种据说速度更快的,没测试过两者的速度 ...

  10. 微信小程序--代码构成---JS 交互逻辑

    一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. <view>{{ msg }}&l ...