React倒计时setInterval不工作?正在等待您的解决方案

Question

import "./styles.css";
import { useState, useEffect } from "react";
export default function App() {
const [timerHours, setTimerHours] = useState('00');
const [timerMinutes, setTimerMinutes] = useState('00');
const [timerSeconds, setTimerSeconds] = useState('00');
const startTimer = (duration) => {
setInterval(() => {
var seconds = Math.floor((duration / 1000) % 60),
minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
if (hours === 0 && minutes === 0) {
clearInterval();
}
else {
setTimerHours(hours);
setTimerMinutes(minutes);
setTimerSeconds(seconds);
}
}, 1000)
}
useEffect(() => {
startTimer(80214523);
return () => {
clearInterval()
}
});
return (
<div className="App">
{timerHours} : {timerMinutes} : {timerSeconds}
</div>
);
}

像这样的代码结构。获取小时、分钟和秒的信息是没有问题的。倒计时不起作用。

示例：https://codesandbox.io/s/zealous-aryabhata-r1dwo?file=/src/App.js:0-1101

Answer 1

您的问题是，每次更新状态时都会运行useeffect挂钩，然后您的倒计时一直以相同的起点开始，因为您使用了恒定的

我在这里找到了一个例子https://www.digitalocean.com/community/tutorials/react-countdown-timer-react-hooks