我正在尝试创建一个加载组件,该组件将使用 React 中的 setInterval 每 1000 毫秒定期向 div 添加一个句点。我正在尝试使用文档中描述的方法清理 setInterval 。
https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
import React, { useEffect, useState } from 'react'
const Loading = () => {
const [loadingStatus, setLoadingStatus] = useState('.')
const [loop, setLoop] = useState()
useEffect(() => {
setLoop(setInterval(() => {
console.log("loading")
setLoadingStatus(loadingStatus + ".")
}, 1000))
return function cleanup() {
console.log('cleaning up')
clearInterval(loop)
}
}, [])
return (<p>
{`Loading ${loadingStatus}`}
</p>)
}
export default Loading
但是,loadingStatus 变量仅更新一次,并且即使组件停止安装后,setInterval 循环也不会被清除。我必须使用类组件来实现它吗?
最佳答案
依赖关系是我们对 React 何时应该运行效果的提示,即使我们设置了时间间隔并且不提供任何依赖关系 []
,React 不会知道我们想要多次运行它,因为我们的空依赖项没有任何真正的改变 []
.
为了获得想要的结果,我们需要考虑何时运行效果?
我们想在 loadingStatus
时运行它更改,因此我们需要添加 loadingStatus
作为我们的依赖项,因为我们希望每次都运行效果 loadingStatus
变化。
我们有两个选择
添加loadingStatus
作为我们的依赖。
const Loading = () => {
const [loadingStatus, setLoadingStatus] = useState(".");
const [loop, setLoop] = useState();
useEffect(
() => {
setLoop(
setInterval(() => {
console.log("loading");
setLoadingStatus(loadingStatus + ".");
}, 1000)
);
return function cleanup() {
console.log("cleaning up");
clearInterval(loop);
};
},
[loadingStatus]
);
return <p>{`Loading ${loadingStatus}`}</p>;
};
使我们的效果不知道我们使用 loadingStatus
const Loading = () => {
const [loadingStatus, setLoadingStatus] = useState(".");
useEffect(() => {
const intervalId = setInterval(() => {
setLoadingStatus(ls => ls + ".");
}, 1000);
return () => clearInterval(intervalId);
}, []);
return <p>{`Loading ${loadingStatus}`}</p>;
};
在此处阅读更多信息 => a-complete-guide-to-useeffect
关于javascript - 如何使用react hooks清理useEffect中的setInterval,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55763957/