播放/暫停不適用於 useEffect 和使用 setInterval

Question

這是我的代碼。 每當我按下開始按鈕時，它就會痙攣。 任何幫助將不勝感激，我想，每當我按下按鈕。 根據 isPlaying 的真實性倒計時 1 秒。

const [onBreak, setOnBreak] = useState(false) 
const [isPlaying, setIsPlaying] = useState(false)

useEffect(() => {
  const timerFunc = setInterval(() => {
    setIsPlaying(!isPlaying);
    if (!onBreak) {
      if (sessionSec === 0 && sessionMin !== 0) {
        setSessionSec(59);
        setSessionMin(sessionMin - 1);
      } else if (sessionSec !== 0 && sessionMin !== 0) {
        setSessionSec(sessionSec - 1);
      } else if (sessionSec === 0 && sessionMin === 0) {
        setOnBreak(true);
      }
    } else if (onBreak) {
      if (breakSec === 0 && breakMin !== 0) {
        setBreakSec(59);
        setBreakMin(breakMin - 1);
      } else if (breakSec !== 0 && breakMin !== 0) {
        setBreakSec(breakSec - 1);
      } else if (breakSec === 0 && breakMin === 0) {
        setOnBreak(false);
      }
    } else {
      clearInterval(timerFunc);
    }
  }, 100);
}, [isPlaying]);


<button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>

Answer 1

如果setIsPlaying(!isPlaying)調用useEffect()則只在 onclick 中調用setIsPlaying(1isPlaying)一次。 您還需要將間隔持續時間更改為 1000 以等待一秒鍾，例如

const [onBreak, setOnBreak] = useState(false) 
const [isPlaying, setIsPlaying] = useState(false)

useEffect(() => {
  const timerFunc = setInterval(() => {
    if (!onBreak) {
      if (sessionSec === 0 && sessionMin !== 0) {
        setSessionSec(59);
        setSessionMin(sessionMin - 1);
      } else if (sessionSec !== 0 && sessionMin !== 0) {
        setSessionSec(sessionSec - 1);
      } else if (sessionSec === 0 && sessionMin === 0) {
        setOnBreak(true);
      }
    } else if (onBreak) {
      if (breakSec === 0 && breakMin !== 0) {
        setBreakSec(59);
        setBreakMin(breakMin - 1);
      } else if (breakSec !== 0 && breakMin !== 0) {
        setBreakSec(breakSec - 1);
      } else if (breakSec === 0 && breakMin === 0) {
        setOnBreak(false);
      }
    } else {
      clearInterval(timerFunc);
    }
  }, 1000);
}, [isPlaying]);


<button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>