react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)

最近一直在做react项目,发现一个bug,困扰了我两天。

Can‘t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

稍稍翻译下:不能在已经被销毁的组件中调用setState()方案

出现场景:跳转路由 当前组件被销毁 组件内部还存在异步操作对state的状态信息 比如http请求,定时器setTimeOut更新state

解决方法:

1、清除所有监听

componentWillUnmount() {
  this.setState = (state,callback)=>{ return; };
}

组件被销毁之前重写setState方法 不对状态做任何改变

或者定向取消某些监听即可,如下所示

2、定向清除个别监听

将定时器绑定到组件

react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)

原文地址:https://www.cnblogs.com/jianxian/p/12588369.html

时间: 2025-01-13 14:19:46

react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)的相关文章

react常见组件问题Can't perform a React state update on an unmounted component

在些react组件的时候,会有这个警告 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method” 这是因为在写一

extjs组件添加事件监听的三种方式 http://blog.sina.com.cn/s/blog_48d7f92901011cfn.html

extjs对组件添加监听的三种方式 在定义组件的配置时设置 如代码中所示: Java代码 xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:'99%', listeners:{'blur':function(){ alert(1); }} 对组件变量通过

初识vue 2.0(13):子组件使用watch监听父组件变化

子组件使用created或者mounted通常只能在组件初始化的时候,获取父组件传过来的props数据. 父组件props数据发生变化,子组件默认无法感知,因此需要手动实现子组件监听父组件变化的功能. 一般的值类型数据,可以直接使用watch监听: watch: { msg(newVal, oldVal){//对引用类型的值无效 console.info('value changed ', newVal) } } 引用类型,普通watch方法,无法监听到引用类型内部的变化. 解决此问题,可以在父

Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听

一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <div id="app"> <u

一阶段项目总结 导航栏 滚动监听固定

//导航栏操作  var hd = $(".header2").offset().top;  $(window).scroll(function() {   var hu = $(document).scrollTop();   // alert(hui);   // console.log(hui);   //console.log(dd);   if (hu <= 500) {    $(".header2").removeClass("nav1

【react】react组件销毁中清理异步操作和取消请求

1.问题bug 1 ( Fetch不能中断的话 那如何在组件移除之前 移除掉这个异步请求? ) React中,因为异步操作的关系,组件销毁后调用了setState(),报警告,怎么解决? 我在componetWillMount中访问了接口返回数据后,调用了setState,访问的时候按了后退,导致还没收到响应就销毁了组件 ,但是fetch请求没被结束掉,之后 收到响应就调用了setState(),发出警告.请问这种情况该怎么处理?在unmount中结束fetch吗?但fetch怎么结束呢?官方文

vue中父组件如何监听子组件值的变化

vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值: 3:父组件可以通过this.$refs.name.去访问子组件的值或方法: 4:子组件可以通过this.$parent.去访问父组件的值或方法: 总结了一下,感觉好像挺全面的,好像不缺啥了.... 但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响

vue 创建监听,和销毁监听(addEventListener, removeEventListener)

最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用: 1 2 mounted() {     window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名 1 后来发现要在后面添加一个true之后才行: 1 2 3 mounted() {   window.addEventListener("scroll", this.setHeadPosi

react-router搭配react-redux无法监听路由变化的问题

在react中,要将react组件连接到redux中,通常会这样包装组件 class Home extends Component { } function select(state) { return { logBox:state.logBox } } export default connect(select)(Home) 但是当搭配react-router的时候,在进行路由跳转的时候,组件不会重新render.这个时候看react-redux的connect方法的说明: connect([