為什么我的 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 變量並據此采取行動。