Javascript Pomodoro时钟（使用React挂钩）倒计时未开始

尝试重构此文件以使用React挂钩。单击“开始计时器”按钮时，遇到倒计时未开始的问题。我认为问题来自intervalRef

我是否正确使用useRef

如果你不想去沙箱：

import React, {useState, useRef } from 'react'

export default function Pomodoro() {
    const [seconds, setSeconds] = useState(0)
    const [workMinutes, setWorkMinutes] = useState(25)
    const [restMinutes, setRestMinutes] = useState(5)
    const [start, setStart] = useState(false)
    const [relax, setRelax] = useState(false)

    // Control functions
    const intervalRef = useRef();

    function startTimer() {
        if(!intervalRef.current){
            intervalRef.current = setInterval(1000)
        }
        setStart(!start)
    }
    function pauseTimer() {
        if(!intervalRef.current){
            clearInterval(intervalRef.current)
            intervalRef.current = undefined
        }
    }
    function resetTimer() {
        if(!intervalRef.current){
            clearInterval(intervalRef.current)
            intervalRef.current = undefined
        }
        setSeconds(0)
        setWorkMinutes(25)
        setRestMinutes(5)
        setStart(false)
        setRelax(false)
    }
    function timer() {
        if(seconds === 0){
            setSeconds(59)
        }else{
            setSeconds(seconds - 1)
        }

        if(relax) {
            if(seconds === 0){
                setRestMinutes(restMinutes - 1)
            }
            else if(restMinutes === 5){
                setRestMinutes(4)
            }else{
                setRestMinutes(restMinutes)
            }
        }

        if(restMinutes === -1) {
            setRestMinutes(5)
            setRelax(false)
        } else {
            setWorkMinutes( seconds === 0 ? workMinutes - 1 : workMinutes === 25 ? 24 : workMinutes)

            if (workMinutes === -1) {
                setWorkMinutes(25)
                setRelax(true)
            }
        }
    }

    return (
        <>
            {timer}
            <p>{relax ? 'Take a Break' : 'Get Busy'}</p>
            <p>{relax ? restMinutes : workMinutes} : {seconds < 10 ? `0${seconds}` : seconds}</p>
            <button onClick={start ? pauseTimer: startTimer}>{start ? 'Pause' : 'Start'}</button>
            <button onClick={resetTimer}>Reset</button>
        </>
    )
}

import React，{useState，useRef}来自“React”
导出默认函数pomotoro（）{
常量[秒，设置秒]=使用状态（0）
const[workMinutes，setWorkMinutes]=useState（25）
const[restMinutes，setRestMinutes]=useState（5）
const[start，setStart]=useState（false）
const[relax，setRelax]=useState（false）
//控制功能
const intervalRef=useRef（）；
函数startTimer（）{
如果（！intervalRef.current）{
intervalRef.current=设置间隔（1000）
}
设置开始（！开始）
}
函数pauseTimer（）{
如果（！intervalRef.current）{
清除间隔（间隔参考电流）
intervalRef.current=未定义
}
}
函数resetTimer（）{
如果（！intervalRef.current）{
清除间隔（间隔参考电流）
intervalRef.current=未定义
}
设置秒（0）
设置工作分钟数（25）
setRestMinutes（5）
设置开始（错误）
setRelax（假）
}
函数计时器（）{
如果（秒===0）{
设置秒（59）
}否则{
设置秒（秒-1）
}
如果（放松）{
如果（秒===0）{
setRestMinutes（restMinutes-1）
}
else if（restMinutes==5）{
setRestMinutes（4）
}否则{
setRestMinutes（restMinutes）
}
}
如果（restMinutes==-1）{
setRestMinutes（5）
setRelax（假）
}否则{
setWorkMinutes（秒===0？工作分钟-1：工作分钟===25？24：工作分钟）
如果（工作分钟==-1）{
设置工作分钟数（25）
setRelax（真）
}
}
}
返回(
{计时器}
{放松？'休息一下'：'忙碌起来'}

{relax？restMinutes:workMinutes}:{seconds<10？`0${seconds}`:seconds}

{开始？'Pause'：'start'}
重置
)
}

您忘记了在

setInterval

中回调，但我还是希望这样做：

import React, { useState, useEffect } from "react";

export default function Pomodoro() {
  const [seconds, setSeconds] = useState(25 * 60);
  const [paused, setPaused] = useState(true);

  useEffect(() => {
    const int = setInterval(() => {
      console.log(`${Date.now()} - paused: ${paused}`);
      if (!paused) {
        setSeconds(s => s - 1);
      }
    }, 1000);
    return () => {
      clearInterval(int);
    };
  }, [paused]);

  function startTimer() {
    setPaused(false);
  }
  function pauseTimer() {
    setPaused(true);
  }
  function resetTimer() {
    setPaused(true);
    setSeconds(25 * 60);
  }

  return (
    <>
      {`${Math.floor(seconds / 60)}:${("00" + (seconds % 60)).slice(-2)}`}
      <button onClick={paused ? startTimer : pauseTimer}>
        {paused ? "Start" : "Pause"}
      </button>
      <button onClick={resetTimer}>Reset</button>
    </>
  );
}

或者在另一个状态下处理它，但是你需要做两次每件事（只有当你在切换时关心记住旧的状态时才可以）

---

您忘记了在

setInterval

中回调，但我还是希望这样做：

import React, { useState, useEffect } from "react";

export default function Pomodoro() {
  const [seconds, setSeconds] = useState(25 * 60);
  const [paused, setPaused] = useState(true);

  useEffect(() => {
    const int = setInterval(() => {
      console.log(`${Date.now()} - paused: ${paused}`);
      if (!paused) {
        setSeconds(s => s - 1);
      }
    }, 1000);
    return () => {
      clearInterval(int);
    };
  }, [paused]);

  function startTimer() {
    setPaused(false);
  }
  function pauseTimer() {
    setPaused(true);
  }
  function resetTimer() {
    setPaused(true);
    setSeconds(25 * 60);
  }

  return (
    <>
      {`${Math.floor(seconds / 60)}:${("00" + (seconds % 60)).slice(-2)}`}
      <button onClick={paused ? startTimer : pauseTimer}>
        {paused ? "Start" : "Pause"}
      </button>
      <button onClick={resetTimer}>Reset</button>
    </>
  );
}

或者在另一个状态下处理它，但是你需要做两次每件事（只有当你在切换时关心记住旧的状态时才可以）

const [relax, setRelax] = useState(false);
const [relaxSeconds, setRelaxSeconds] = useState(10 * 60);
useEffect(() => {
    const int = setInterval(() => {
      console.log(`${Date.now()} - paused: ${paused}`);
      if (!paused) {
        relax ? setRelaxSecdonds(s => s - 1) : setSeconds(s => s - 1);
      }
    }, 1000);
    return () => {
      clearInterval(int);
    };
  }, [paused, relax]);