为什么我的 React setState 永远循环？

Question

我正在尝试制作番茄钟应用程序，倒计时时钟将在时间到时继续切换breaking state， breaking state 将指示您当前是否正在工作（ breaking === false ）或者您正在休息（ breaking === true ）。

但是，控制台显示setBreaking一直在循环，导致错误。 我尝试使用prevState => !prevState匿名 function ，但仍然出现错误。 有什么建议吗？

以下是摘录：

  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>
  };

Answer 1

您不应该将订阅，计时器......放在主体内。 相反，您需要将代码和开始倒计时放入 useEffect(..., []) 挂钩。

通过不使用钩子，您的代码将在您每次尝试渲染组件时执行，有时它是一种随机的......

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>
  };

Answer 2

在这里你 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> };

使用 useEffect 您可以观察 state 变量并据此采取行动。