[英]Why is my React setState is looping forever?
I am trying to make a pomodoro app and the count down clock will keep toggle the breaking
state when the time is up, the breaking
state will indicate whether you're currently working ( breaking === false
) or you're taking a break ( breaking === true
).我正在尝试制作番茄钟应用程序,倒计时时钟将在时间到时继续切换
breaking
state, breaking
state 将指示您当前是否正在工作( breaking === false
)或者您正在休息( breaking === true
)。
However, the console shows that the setBreaking
are keep looping, resulting in error.但是,控制台显示
setBreaking
一直在循环,导致错误。 I've tried to pass in an anonymous function with prevState => !prevState
, error still occur.我尝试使用
prevState => !prevState
匿名 function ,但仍然出现错误。 Any advice?有什么建议吗?
Here are the excerpt:以下是摘录:
function Clock() {
const [minute, setMinute] = useState(parseInt(remainingTime/60));
const [second, setSecond] = useState(padZero(remainingTime%60));
const [breaking, setBreaking] = useState(false);
function padZero(num) {
return num.toString().padStart(2,0);
}
function countDown() {
useInterval(() => {
setRemainingTime(remainingTime-1);
}, 1000);
}
if (remainingTime === 0) {
setBreaking(!breaking) // keep looping
setCountDown(false);
setRemainingTime(breakMinute*60)
}
if (countingDown === true) {
countDown();
} else {
console.log('Timer stopped!');
}
return <h1>{minute}:{second}</h1>
};
You are not supposed to put subscriptions, timers... inside the main body.您不应该将订阅,计时器......放在主体内。 Instead, you need to put your code and start the countdown into a useEffect(..., []) hook.
相反,您需要将代码和开始倒计时放入 useEffect(..., []) 挂钩。
By not using hooks, your code will be executed everytime you are trying to render the component, and sometimes it's kind of random...通过不使用钩子,您的代码将在您每次尝试渲染组件时执行,有时它是一种随机的......
function Clock() {
const [minute, setMinute] = useState(parseInt(remainingTime/60));
const [second, setSecond] = useState(padZero(remainingTime%60));
const [breaking, setBreaking] = useState(false);
React.useEffect(() => {
// Your code here
}, []);
return <h1>{minute}:{second}</h1>
};
Here you go with a solution using useEffect在这里你 go 与使用 useEffect 的解决方案
function Clock() { const [minute, setMinute] = useState(parseInt(remainingTime/60)); const [second, setSecond] = useState(padZero(remainingTime%60)); const [breaking, setBreaking] = useState(false); function padZero(num) { return num.toString().padStart(2,0); } function countDown() { useInterval(() => { setRemainingTime(remainingTime-1); }, 1000); } React.useEffect(() => { if (remainingTime === 0) { setBreaking(;breaking); setCountDown(false), setRemainingTime(breakMinute*60) } }; [remainingTime]). React;useEffect(() => { if (countingDown) { countDown(). } else { console;log('Timer stopped,'); } }: [countingDown]); return <h1>{minute}:{second}</h1> };
Using useEffect you can watch the state variable and take action based on that.使用 useEffect 您可以观察 state 变量并据此采取行动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.