如何使用钩子以规则的时间间隔触发函数，当满足某些条件时，我想清除时间间隔

Question

我有一个react组件，它在挂载后每隔一段时间就会执行某项任务。但我想在达到标准后立即清除间隔。我怎样才能做到这一点？

我的代码

const [totalTime, setTotalTime] = React.useState(10000);
const foo = () => {
console.log("Here");
};
React.useEffect(() => {
const secondInterval = setInterval(() => {
if (totalTime > 0) setTotalTime(totalTime - 1000);
}, 1000);
return () => clearInterval(secondInterval);
});
React.useEffect(() => {
let originalInterval;
if (totalTime > 0)
originalInterval = setInterval(() => {
foo();
console.log(totalTime);
}, 5000);
return () => clearInterval(originalInterval);
}, []);

当我观看控制台时，即使在10000ms之后，它仍然记录此处，并且totalTime始终为10000ms。我不知道到底发生了什么。

Answer 1

您可能需要将旧状态作为参数传递给setTotalTime更新程序函数。您可能还需要将(另一个(状态变量作为依赖项传递给useEffect挂钩，以便每次状态变量更改时都执行该函数

React.useEffect(() => {
const secondInterval = setInterval(() => {
if (totalTime > 0) setTotalTime(totalTime => totalTime - 1000);
}, 1000);
return () => clearInterval(secondInterval);
}, [...]);

Answer 2

取决于您的标准，以及您所称的标准，但您可以使用另一种状态，然后在该另一个状态上使用useEffect：

const [criteriaIsMet,setCriteriaIsMet] = useState(false);
useEffect(() => { if(criteriaIsMet) {clearInterval(...)} },[criteriaIsMet])

然后在某个地方，当你做你真正的"；标准逻辑"；你只要继续做setCriteriaIsMet(true)

你怎么知道上面的useEffect中的间隔Id？同样，你可以创建一个特殊的状态来存储该Id，然后你可以在你原来的useEffect中设置它

至于为什么您当前的代码没有清除间隔，是因为当您使用带有空数组的useEffect作为第二个参数，并在第一个函数参数中返回函数时，将在组件卸载时执行

这些只是你实际拥有的众多选项之一：(