我正在练习 React useState hooks 来制作一个每十秒重置一次的测验计时器。我现在所拥有的是每秒更新状态,并且 p 标签会相应地呈现。但是,当我 console.log(seconds) 每次都显示 10 时,因此永远不会满足条件 (seconds === 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;