我是新来的反应钩。并且当我从一节跳到另一节时会显示此警告。不用等它完成就能上马。
index.js:1警告:无法对未挂载的组件执行React状态更新。这是一个no-op,但它表明您的应用程序中存在内存泄漏。若要修复,请取消useEffect清理函数中的所有订阅和异步任务。在FadeItems(在AboutSection.jsx:32)在div(由CardBody创建)在CardBody(在AboutSection.jsx:29)在div(由Card创建)在Card(在AboutSection.jsx:22)在div(在AboutSection.jsx:19)在AbouSection(在About.jsx:7)在About(由Context.Consumer创建)
下面是FadeItems的代码:
null
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;
null
我有一个定时器设置在2秒后挂载褪色。由道具Onenter调用。在它上山之后。正如这里的Reacstrap文档所建议的:
淡入项目文档Reactstrap
关于代码的注释部分试图使用UseEffect进行修复。但我还不知道如何正确地使用它。如果要检查存储库:
GitHub存储库
您需要在useeffect
的清理函数中清除设置的计时器
const [mount, setMount] = useState(true);
useEffect(() => {
const timerId = setTimeout(() => {
let mounted = true
if (mount) {
mount = false;
}
return () => {
clearTimeout(timerId);
}
})