首页 > 其他分享 >解决React Warning: Can't perform a React state update on an unmounted component. This is a no-op,

解决React Warning: Can't perform a React state update on an unmounted component. This is a no-op,

时间:2024-07-17 16:23:27浏览次数:14  
标签:function leak fix React application state Warning useEffect

在写react程序时遇到警告:

Warning: 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 a useEffect cleanup function.

我们看到,react说无法对卸载的组件执行React状态更新,我造成了内存泄漏,并且报错最后一句说让我在useEffect的清理函数中取消所有异步任务。

但是实际上我都代码中没有使用useEffect,这该如何取消异步任务?

实际上我的代码里存在一处条件渲染,并且在其中使用了onChange对Select组件的值做了监听,当条件为false是会卸载该组件,然而onChange还在监听并在回调中去set状态,这就是原因了。

于是我将条件渲染改为:

style={{ display: isSelecting(index, idx) ? 'block' : 'none' }}
return (
    <div className="wrap">
        <div className="cell"
            style={{ display: isSelecting(index, idx) ? 'block' : 'none' }}
        >
            <Select size="small" className='width'
                defaultValue={CurrPropType}
                onChange={onChangePropType}
                options={PropTypes}
            />
        </div>
        <div className="cell"
            style={{display: !isSelecting(index, idx) ? 'block' : 'none'}}
            onClick={() => updateSelected(index, idx, true, type)}
        >
            <PropTypeName type={type} />
        </div>                                                                        
    </div>
)

问题解决。

此外,useEffect中有异步任务的就很好解决了,在useEffect最后return一个清理函数,清理调相关内容就行了。

标签:function,leak,fix,React,application,state,Warning,useEffect
From: https://www.cnblogs.com/facingscreen/p/18307657

相关文章

  • yearrecord——一个类似痕迹墙的React数据展示组件
    介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件。下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录,像这样类似痕迹墙的形式可以比较直观且高效得展示一段时间内得数据记录。然而要从0实现这个功能还是有一些麻烦得,并且该功能可用......
  • Java中的响应式编程与Reactor框架使用详解
    Java中的响应式编程与Reactor框架使用详解大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!一、引言响应式编程是一种面向数据流和变化传播的编程范式,它适用于处理异步数据流和事件驱动的场景。Reactor框架是在Java中实现响应式编程的强大工具,本文将深入......
  • 创建react项目
    1.创建项目npxcreate-react-appname//1.npxnode的工具命令//2.create-react-app创建react项目的固定写法//3.name项目名称2.目录结构              重点关注src目录,入口文件为src/index.js,也就是运行的起点,导入项目的根组件并......
  • 第三期 Plugins & Function Calling
    大模型的缺陷:没有最新消息:训练周期长且昂贵,GPT3.5/4的知识截至2021-9没有真逻辑:表现出的逻辑和推理,是训练文本的统计规律,不是真正的逻辑Plugins订机票、数学计算、日程提醒...插件选择&使用插件的原理通过prompt判断是否应该调用插件失败使用门槛高:用户需要知道每......
  • react速成指南
    React18速成–适合有vue基础的同学目录前言脚手架创建react项目jsx重点知识1.在jsx语法中html直接内嵌在函数中并通过return返回2.jsx只能有一个根元素(整合成一个盒子)3.插值4.事件操作React18组件通信与插槽1.为dom组件设置Props2.react组件的PropsReactHooks1.......
  • 2021 ICPC 网络赛 第二场 L Euler Function(势能线段树,欧拉函数,状态压缩)
    2021ICPC网络赛第二场LEulerFunction题意给定序列,定义两个操作\(l,r,x\)对区间\([l,r]\)的数乘\(x\)\(l,r\)求\(\sum\phi{a}_{i}\)思路注意欧拉函数的性质,若\(i\bmodp=0\),\(\phi(i*p)=p*\phi(i)\),否则\(\phi(i*p)=(p-1)*\phi(i)\)因为\(x,w\)的......
  • React+TS前台项目实战(三十)-- 首页构建之基于react-query和性能hook实现全页面数据渲染
    文章目录前言一、效果展示二、首页源码+详细注释说明+技术分析1.页面功能分析2.代码+详细注释总结前言前三篇文章详细介绍了首页的响应式布局,采用关注点分离进行模块拆解,现在只需按需引入模块,页面更加简洁,代码的维护性得到提升。今天将进入首页的收尾阶段,即完成......
  • vite react Typescript 构建一个移动端网页
    使用Vite、React和TypeScript来构建一个移动端网页是一个高效且现代的开发方式。Vite是一个构建工具和开发服务器,它利用原生ES模块导入来提供快速的冷启动和即时模块热更新(HMR)。React是用于构建用户界面的JavaScript库,而TypeScript是JavaScript的一个超集,它添......
  • 深入理解 React 的 useSyncExternalStore Hook
    深入理解React的useSyncExternalStoreHook大家好,今天我们来聊聊React18引入的一个新Hook:useSyncExternalStore。这个Hook主要用于与外部存储同步状态,特别是在需要确保状态一致性的场景下非常有用。本文将深入探讨这个Hook的使用场景、工作原理,并通过代码示例来帮助大......
  • 深入理解 React 的 Context API:从基础到高级应用
    深入理解React的ContextAPI:从基础到高级应用在React应用中,状态管理一直是一个重要且复杂的话题。虽然Redux和MobX等状态管理库提供了强大的解决方案,但有时候我们只需要一个简单的方式来在组件树中传递数据。React的ContextAPI就是为了解决这个问题而生的。今天,我们......