博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于Warning: setState(...): Can only update a mounted or mounting component. This
阅读量:6583 次
发布时间:2019-06-24

本文共 1586 字,大约阅读时间需要 5 分钟。

关于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.的解决方案

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.Please check the code for the xxx component.复制代码

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

解决的方式有两种:

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

componentDidMount = () => {    //1.ajax请求    $.ajax('你的请求',{})        .then(res => {            this.setState({                aa:true            })        })        .catch(err => {})    //2.定时器    timer = setTimeout(() => {        //dosomething    },1000)}componentWillUnMount = () => {    //1.ajax请求    $.ajax.abort()    //2.定时器    clearTimeout(timer)}复制代码

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

componentDidMount = () => {    this._isMounted = true;    $.ajax('你的请求',{})        .then(res => {            if(this._isMounted){                this.setState({                    aa:true                })            }        })        .catch(err => {})}componentWillUnMount = () => {    this._isMounted = false;}复制代码

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

componentDidMount = () => {    $.ajax('你的请求',{})    .then(res => {        this.setState({            data: datas,        });    })    .catch(error => {     });}componentWillUnmount = () => {    this.setState = (state,callback)=>{      return;    };}复制代码

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

转载地址:http://xssno.baihongyu.com/

你可能感兴趣的文章
Solr 按照得分score跟指定字段相乘排序
查看>>
GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)
查看>>
create database link
查看>>
shouldAutoRotate Method Not Called in iOS6
查看>>
Sql Server系列:Transact-SQL变量
查看>>
ADF_Database Develop系列1_通过UML数据库开发之建Logical UML Class Model
查看>>
SQL Server表分区的NULL值问题
查看>>
JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
查看>>
Linux系统调用
查看>>
天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十一)路径导航模块
查看>>
[LeetCode] Generalized Abbreviation 通用简写
查看>>
Android Weak Handler:可以避免内存泄漏的Handler库
查看>>
SDUTOJ 2804求二叉树的深度
查看>>
MySQL问题汇总
查看>>
Spring 整合Mybatis实例
查看>>
MTU & MSS 详解记录(转)
查看>>
C#操作SQL Server数据库
查看>>
Memcache 笔记
查看>>
Swift 实现图片转字符画的功能
查看>>
PHP开发之Zend Studio快捷键汇总
查看>>