我正在尝试在 React 中使用 setInterval 但卡在我不正确理解的事情上。
代码是：
const Countdown = () => {
const [countdownSecond, setCountdownSecond] = React.useState(0);
function x() {
console.log(countdownSecond);
setCountdownSecond(countdownSecond + 1);
}
return (
<>
<button onClick={() => setInterval(x, 1000)}>Start</button>
{countdownSecond}
</>
);
}
问题是控制台总是登录到 0。我不知道为什么会这样。我误解了什么概念？
你可以做：
const Countdown = () => {
const [countdownSecond, setCountdownSecond] = React.useState(0);
const [start, setStart] = React.useState(false);
React.useEffect(()=>{
const interval = null
if (start) {
interval = setInterval(()=>{
setCountdownSecond(countdownSecond + 1);
}, 1000);
}
return ()=>{if (interval !== null) clearInterval(interval)};
},[start]);
function x(e) {
e.preventDefault();
console.log(countdownSecond);
setStart(!start);
}
return (
<>
<button onClick={(e) => x(e)}>{start?"Stop":"Start"}</button>
<p>Countdown: {countdownSecond}</p>
</>
);
}