Pomodoro Clock (с помощью React Hooks) обратный отсчет не начинается - PullRequest
Новая
       3

Pomodoro Clock (с помощью React Hooks) обратный отсчет не начинается

0 голосов
/ 24 апреля 2019

Пытался провести рефакторинг этих 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>
        </>
    )
}

1 Ответ

1 голос
/ 24 апреля 2019

Вы забыли об обратном вызове в 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]);
...