useEffect清理功能，以防止卸载组件更新异步

Question

我是React Hooks的新手。当我从About节跳转到另一节时就会显示这个警告。

index.js:1警告:无法在unmounted上执行React状态更新组件。这是一个no-op，但它表明您的应用程序。若要修复，请取消所有订阅和异步任务在一个useEffect清理函数中。在淡出项目(在AboutSection.jsx:32)div(由CardBody创建)在CardBody(在AboutSection.jsx:29)在div中(由Card创建)在卡片上(关于section .jsx:22)在div (at AboutSection.jsx:19)在about部分(在About.jsx:9处)章节(约.jsx:7)in 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秒。它由props onEnter调用。在它安装之后。如Reacstrap文档所示:

淡出项目文档Reactstrap

代码的注释部分是试图用useEffect修复的。但我还不知道如何正确使用它。如果您想检查存储库:

GitHub库

Answer 1

需要清除useEffect清理功能中的设置定时器

const [mount, setMount] = useState(true);
useEffect(() => {
const timerId = setTimeout(() => {
let mounted = true
if (mount) {
mount = false;
}
return () => {
clearTimeout(timerId);
}
})