Компонент таймера продолжает работать по истечении времени - PullRequest
Новая
       115

Компонент таймера продолжает работать по истечении времени

1 голос
/ 29 мая 2020

Я переписал свой классовый компонент в функциональный, но где-то ошибся. Я могу узнать, что это такое. Таймер продолжает работать, когда время истекло. Я думаю, что это useEffect, который я использую неправильно? Компонент класса работал нормально, но мне нужен функционал для использования redux. 

import React, {useEffect, useState} from 'react';
import '../style/App.scss';

function CountdownTimer(){
    const io = require('socket.io-client');
    const socket = io.connect("http://localhost:3001/", {
        reconnection: false
    });

    useEffect(() => {
        if(running){
            handleStart()
        }
    });
    let timer = null;
    const [time, setTime] = useState(0.1*60);
    const [running, setRunning] = useState(true);


    const handleStart= () =>  {
        if (running){
            timer = setInterval(() => {
                if (time === 0){
                    console.log("no more time");
                    handleStop()
                }else{
                    const newTime = time - 1;
                    setTime(
                        newTime >= 0 ? newTime : handleStop
                    );
                }
            }, 1000);

        }
    }

    const handleStop = () =>  {
        if(timer) {
            clearInterval(timer);
            setRunning(false);
        }
    }

    const format = (time) => {
        const date = new Date(time * 1000);
        let hh = date.getUTCHours();
        let mm = date.getUTCMinutes();
        let ss = date.getSeconds();
        if (hh < 10) {hh = "0"+hh;}
        if (mm < 10) {mm = "0"+mm;}
        if (ss < 10) {ss = "0"+ss;}
        return '00' !== hh ? hh+":"+mm+":"+ss : mm+":"+ss;
    }

    return(
        <div className="icon-value">
            <h1>{format(time)}</h1>
        </div>
    );
}
export default CountdownTimer;
...