在写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