番茄钟（使用React Hooks）倒计时无法启动

Question

试图重构这个Pomodoro Clock使用React Hooks。在单击“开始计时器”按钮时，倒计时没有启动时出现问题。我认为问题来自intervalRef。

我正确使用useRef吗？

https://codesandbox.io/s/k95zk32897

如果你不想去沙箱：

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>
        </>
    )
}

Answer 1

你忘记了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>
    </>
  );
}

沙箱：https://codesandbox.io/s/k9j70jrjy5

你真的不需要这么多状态 - 它们是相互依赖的，所以你可以简化逻辑（当然你可以再做一次工作/放松功能，我没有打扰）。

你可以通过10分钟而不是25分钟来处理这样的放松计时器：

  function startRelaxTimer() {
    setSeconds(10 * 60);
  }

或者通过在其他状态下处理它然后你需要做两次（只有当你在切换时记住旧状态时才会好）。

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]);