Блог

Я собираюсь создать таймер обратного отсчета на своем веб-сайте. мое время окончания приходит с сервера (это число, подобное этому: 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 amp;amp; 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}}
/>