Question

试图重构此Pomodoro Clock以使用React Hooks。单击“启动计时器”按钮时，倒计时没有开始，这是一个问题。我认为问题来自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>
        </>
    )
}

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

Pomodoro Clock（使用React Hooks）倒计时未开始

1 个答案: