Блог

Я пытаюсь обновить состояние циклов таймера pomodoro, поэтому, когда он достигнет 4, он должен войти в длительный период отдыха, а затем, после завершения этого периода, он должен начать все сначала со значениями по умолчанию, но по какой-то причине мое состояние «pomodoros» вообще не обновляется… я что-то упускаю? без этой функции цикла все работает просто отлично… Вот мой код:

 import React, { useContext, useState, useEffect, useRef } from "react"; import { Row, Col } from "react-bootstrap"; import { buildStyles, CircularProgressbar } from "react-circular-progressbar"; import Btn from "./Btn"; import SettingsContext from "../context/SettingsContext"; import "react-circular-progressbar/dist/styles.css";  const red = "#e83283"; const green = "#41d7a7";  const Timer = ({ showSettings }) =gt; { const [isPaused, setIsPaused] = useState(true); const [mode, setMode] = useState("work"); // Can be: Work / Rest / Long Rest const [pomodoros, setPomodoros] = useState(0); const [secondsLeft, setSecondsLeft] = useState(null);  const timerInfo = useContext(SettingsContext);  const isPausedRef = useRef(isPaused); const modeRef = useRef(mode); const secondsLeftRef = useRef(secondsLeft); const pomodorosRef = useRef(pomodoros);  const totalSeconds = mode === "work"  ? timerInfo.workMinutes * 60  : mode === "longrest"  ? timerInfo.restMinutes * 4 * 60  : timerInfo.restMinutes * 60;   useEffect(() =gt; { initTimer();  const interval = setInterval(() =gt; {  if (isPausedRef.current) return;   if (secondsLeftRef.current === 0) {  return switchMode();  }   if (modeRef.current === "rest" amp;amp; secondsLeftRef.current === 0) {  return addPomodoro();  }   tick(); }, 1000);  return () =gt; clearInterval(interval);  }, [timerInfo]);   const initTimer = () =gt; { secondsLeftRef.current = totalSeconds; setSecondsLeft(secondsLeftRef.current);  };   const switchMode = () =gt; { const nextMode =  modeRef.current === "work"  ? pomodorosRef.current === 4  ? "longrest"  : "rest"  : "work"; const nextSeconds =  nextMode === "work"  ? timerInfo.workMinutes * 60  : nextMode === "longrest"  ? timerInfo.restMinutes * 4 * 60  : timerInfo.restMinutes * 60;  setMode(nextMode); modeRef.current = nextMode;  setSecondsLeft(nextSeconds); secondsLeftRef.current = nextSeconds;  };   const tick = () =gt; { secondsLeftRef.current--; setSecondsLeft(secondsLeftRef.current);  };   const addPomodoro = () =gt; { const nextPomodoro = pomodorosRef.current   1; setPomodoros(nextPomodoro); pomodorosRef.current = nextPomodoro;  };   const togglePause = () =gt; { setIsPaused(!isPausedRef.current); isPausedRef.current = isPaused === true ? false : true;  };   const percentage = Math.round((secondsLeft / totalSeconds) * 100);  const showMinutes = Math.floor(secondsLeft / 60);  let showSeconds = secondsLeft % 60;   if (showSeconds lt; 10) { showSeconds = "0"   showSeconds;  }