使用react hooks创建一个计时器

问题描述

我要在我的网站中建立一个倒数计时器。 我的结束时间来自服务器（它是这样的数字：10500（这意味着直到计时器结束需要10500分钟））

我做不到，有人可以帮助我吗？

const [times,setTimes] = useState({ days: 0,hours: 0,minutes: 0,seconds: 0 });
const [timeToReserve,setTimeToReserve] = useState(props.reserveData.ToReserve);

React.useEffect(() => {
    timeToReserve > 0 && setTimeout(() => checkTime(),1000);
},[timeToReserve]);

const checkTime = () => {
    let minutesToReserve = timeToReserve - 1
    setTimeToReserve(minutesToReserve)

    let days = Math.floor(minutesToReserve / (1000 * 60 * 60 * 24));
    let hours = Math.floor((minutesToReserve % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((minutesToReserve % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((minutesToReserve % (1000 * 60)) / 1000);

    setTimes({ days,hours,minutes,seconds })
}

解决方法

类似的事情应该起作用：

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

const CountDown = ({ reserveData }) => {
    const [secondsLeft,setSecondsLeft] = useState(reserveData.ToReserve * 60);
    
    useEffect(() => {
        const countDownTimeout = setTimeout(() => {
            // Stop in case the time is over
            if (secondsLeft > 0) {
                return setSecondsLeft(seconds => seconds - 1);
            }
            clearTimeout(countDownTimeout);
        },1000);
        
        // Clean up if unmounted
        return () => clearTimeout(countDownTimeout);
    },[secondsLeft]);
    
    const days = Math.floor(secondsLeft / (60 * 60 * 24));
    const hours = Math.floor((secondsLeft % (60 * 60 * 24)) / (60 * 60));
    const minutes = Math.floor((secondsLeft % (60 * 60)) / 60);
    const seconds = Math.floor(secondsLeft % 60);
    return (
        <p>
            {days} days,{hours}:{minutes}:{seconds}
        </p>
    );
};

export default CountDown;

您可以使用此组件，例如：

<CountDown
    reserveData={{ToReserve: 24 * 6 * 60}}
/>