setInterval更新React中的状态，但无法识别时间何时为0

Question

我正在练习React useState挂钩，以制作一个每十秒重置一次的测验计时器。我现在所拥有的是每秒更新一次状态，并相应地渲染p标记。但当我console.log(秒(时，它每次都显示10，因此永远不会满足条件(秒==0(。在Chrome的React DevTools中，状态也在相应地更新。我在这里做错了什么？

import React, {useState } from 'react';
function App() {
const [seconds, setSeconds] = useState(10);
const startTimer = () => {
const interval = setInterval(() => {
setSeconds(seconds => seconds - 1);
// Logs 10 every time
console.log(seconds)
// Never meets this condition
if (seconds === 0) {
clearInterval(interval)
}
}, 1000);
}
return (
<div>
<button onClick={() => startTimer()}></button>
// updates with current seconds
<p>{seconds}</p>
</div>
)
}
export default App;

Answer 1

这是因为setSeconds在每个刻度上都会用一个新变量更新状态，但初始引用(seconds===10(仍然指向初始设置变量。这就是为什么它保持在10=>最初的参考。要获得当前值，您必须在setSeconds变量中检查它(以秒为单位传递(，如下所示：

const startTimer = () => {
const interval = setInterval(() => {
setSeconds(seconds => {
if(seconds < 1) {
clearInterval(interval);
return 10;
}
return seconds - 1;
});
}, 1000);
}

这是一个正在工作的沙盒

您还应该在一个函数中将变量重命名为不具有相同的名称(秒(两次。