Estoy usando Reactjs para hacer un temporizador de cuenta regresiva que puede separar el día, las horas, los minutos y los segundos entre 2 fechas. Funciona bien, pero solo puede contar hasta una fecha mayor que la fecha actual (21/08/2022 < 17/10/2022), pero no puede contar hasta (21/08/2022 a 21/08/2023) ). Tengo una función para transmitir accesorios:
const timeLeft = useCountdown(new Date(2022, Data.date.month , Data.date.day));Debería verse así cuando console.log:
{days: 87, hours: 20, minutes: 58, seconds: 40}Estoy usando un gancho useCountDown para contar el tiempo entre 2 fechas:
import { useState, useEffect } from "react"; const useCountdown = (deadline) => { const [days, setDays] = useState(0); const [hours, setHours] = useState(0); const [minutes, setMinutes] = useState(0); const [seconds, setSeconds] = useState(0); const leading0 = (num) => { return num < 10 ? "0" + num : num; }; const getTimeUntil = (deadline) => { const time = Date.parse(deadline) - Date.parse(new Date()); if (time < 0) { setDays(0); setHours(0); setMinutes(0); setSeconds(0); } else { setDays(Math.floor(time / (1000 * 60 * 60 * 24))); setHours(Math.floor((time / (1000 * 60 * 60)) % 24)); setMinutes(Math.floor((time / 1000 / 60) % 60)); setSeconds(Math.floor((time / 1000) % 60)); } }; useEffect(() => { setInterval(() => getTimeUntil(deadline), 1000); return () => getTimeUntil(deadline); }, [deadline]); return { days: leading0(days), hours: leading0(hours), minutes: leading0(minutes), seconds: leading0(seconds) }; }; export default useCountdown;No he descubierto cómo arreglar esto. Lo siento por el mal inglés, pero estoy haciendo mi mejor esfuerzo :( ¡Gracias por ayudarme!
Aquí hay una versión mucho más simple:
const useCountdown = (deadline: Date) => { // Time is in seconds const [time, setTime] = useState( Math.max(0, Math.floor((deadline.getTime() - Date.now()) / 1000)) ); const decrement = () => setTime((prevTime) => { return prevTime === 0 ? 0 : prevTime - 1; }); useEffect(() => { const id = setInterval(decrement, 1000); return () => clearInterval(id); }, []); const format = (num: number): string => { return num < 10 ? '0' + num : num.toString(); }; return { days: format(Math.floor(time / (3600 * 24))), hours: format(Math.floor((time / 3600) % 24)), minutes: format(Math.floor((time / 60) % 60)), seconds: format(time % 60), }; };Stackblitz: https://stackblitz.com/edit/react-ts-bnhvxp?file=App.tsx