使用Effect清理功能,防止未挂载的组件异步更新
Posted
技术标签:
【中文标题】使用Effect清理功能,防止未挂载的组件异步更新【英文标题】:useEffect cleanup function to prevent unmounted component to update asynchronous 【发布时间】:2021-05-24 06:16:33 【问题描述】:我是 React Hooks 的新手。当我从 About 部分跳到另一个部分时,会显示此警告。无需等待它完成安装。
index.js:1 警告:无法对已卸载的设备执行 React 状态更新 零件。这是一个无操作,但它表明您的内存泄漏 应用。要修复,请取消所有订阅和异步任务 在 useEffect 清理函数中。 在 FadeItems 中(在 AboutSection.jsx:32) 在 div 中(由 CardBody 创建) 在 CardBody 中(在 AboutSection.jsx:29) 在 div 中(由 Card 创建) 在卡片中(在 AboutSection.jsx:22) 在 div 中(在 AboutSection.jsx:19) 在 AbouSection(在 About.jsx:9) 在部分(在 About.jsx:7) 在 About(由 Context.Consumer 创建)
这是 FadeItems 的代码:
import React, useState from "react";
import PropTypes from "prop-types";
import Fade from "reactstrap";
const FadeItems = (props) =>
const [count, setCount] = useState(0);
// const [mount, setMount] = useState(true);
// useEffect(() =>
// // setTimeout(() =>
// // let mounted = true
// if (mount)
// mount = false;
//
// return function cleanup()
// mounted = false
//
// // setCount(0);
// // , 300)
// ) // prevent the unmounted component to be updated
const text = props;
return (
<div style= backgroundColor: '#282c34', padding: '30px', borderBottom: "solid 2px #764abc">
text.map((statement, index) => (
<Fade
in=count >= index ? true : false
onEnter=() =>
setTimeout(() =>
setCount(index + 1);
, 2000)
onExiting=() => setCount(-1)
tag="h5"
className="mt-3"
key=index + 100
style= backgroundColor: '#282c34'
>
statement
</Fade>
))
</div>
);
;
FadeItems.propTypes =
text: PropTypes.string,
.isRequired;
export default FadeItems;
我有一个计时器设置为在 2 秒后挂载 Fade。由道具 onEnter 调用。装上之后。正如此处的 Reacstrap 文档所建议的那样:
Fade item documentation Reactstrap
关于代码的注释部分是尝试使用 useEffect 修复。但我还不知道如何正确使用它。 如果要检查存储库:
GitHub Repository
【问题讨论】:
【参考方案1】:您需要在useEffect
的清理功能中清除设置的计时器
const [mount, setMount] = useState(true);
useEffect(() =>
const timerId = setTimeout(() =>
let mounted = true
if (mount)
mount = false;
return () =>
clearTimeout(timerId);
)
【讨论】:
最佳实践是使用 return () => //cleanup 函数或 return () => return () => //cleanup 函数。 试图这样做。但还是一样。以上是关于使用Effect清理功能,防止未挂载的组件异步更新的主要内容,如果未能解决你的问题,请参考以下文章
如何取消 useEffect 清理函数中的所有订阅和异步任务?