React Native倒计时setInterval不起作用

Question

我正试图使用useEffect钩子和setInterval函数创建一个倒计时计时器，但当计时器达到0时，它永远不会执行代码。此外，当我console.log倒计时变量的值时，它不会递减。

// set up counter for (un)flipped phone countdown
// countdown of 20 seconds
const [countdown, setCountdown] = useState(20);
let intervalID: any;
// on initialize
useEffect(() => {
// every second reduce countdown by 1
intervalID = setInterval(() => {
setCountdown(countdown - 1);
}, 1000);
return () => clearInterval(intervalID);
}, []);
// check if countdown has reached 0
useEffect(() => {
if (countdown == 0) {
timerReset();
alert("TIMER RESET");
clearInterval(intervalID);
}
}, []);

Answer 1

你可以试试这个：

const [countdown, setCountdown] = useState(20);
useEffect(() => {
let intervalID = setInterval(() => {
setCountdown(prev => {
if (prev === 0) clearInterval(intervalID);   // handle the condition here
return prev - 1;
});
}, 1000);
return () => clearInterval(intervalID);
}, []);

Answer 2

组件函数体中的代码在每次渲染中运行。这意味着您在每次渲染时都将间隔id设置为未定义。请改用useRef来存储值。

第二个效果不应该是挂载效果，它需要作为依赖项进行倒计时。请务必阅读useEffect上的所有文档。