0
95
Vistas¿Qué mal estoy haciendo aquí? tiempo actual a 2 minutos de cuenta regresiva
¿Qué está mal aquí? Estoy creando la hora actual en una cuenta regresiva de 2 minutos usando el momento js aquí. Estoy desfasando los problemas.
const CountDownTimer = () => { const [duration, setDuration] = useState(null); const getFinalTime = useCallback((duration) => { const currentDuration = moment.duration(duration, "milliseconds"); let finalMinutes = currentDuration?.minutes(); let finalSeconds = currentDuration?.seconds(); finalMinutes = finalMinutes < 10 ? `0${finalMinutes}` : finalMinutes; finalSeconds = finalSeconds < 10 ? `0${finalSeconds}` : finalSeconds; return `${finalMinutes}:${finalSeconds}`; }, []); useEffect(() => { const startTimer = moment(billData?.createdAt); const endTimer = moment(billData?.createdAt).add(2, "minutes"); const duration = moment.duration(endTimer.diff(startTimer), "milliseconds"); const interval = setInterval(() => { const newDuration = moment .duration(duration - 1000, "milliseconds") .asMilliseconds(); setDuration(newDuration); }, 1000); return () => clearInterval(interval); }, [billData?.createdAt]); // in getFinalTime passing duration return <>{getFinalTime(duration)}</>; }; export default CountDownTimer;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Parece que estás haciendo mucho trabajo innecesario para un temporizador de cuenta regresiva.
Vea a continuación para una implementación simple.
- El componente de temporizador acepta un objeto
Datelímite. - El componente del temporizador tiene un estado interno que solo garantiza que se actualice cada segundo a través del efecto.
- Calcular el tiempo restante es cuestión de calcular la diferencia de milisegundos entre la hora actual y la fecha límite, seguida de una operación div/mod para extraer minutos y segundos. (Puede agregar otro div/mod para obtener horas y minutos).
function CountdownTimer({ deadline }) { const [, setUpdate] = React.useState(0); React.useEffect(() => { const interval = setInterval(() => { setUpdate((u) => u + 1); }, 1000); return () => clearInterval(interval); }, []); const timeLeftTotal = Math.max( 0, Math.ceil((+deadline - +new Date()) / 1000) ); const timeLeftMinutes = Math.floor(timeLeftTotal / 60); const timeLeftSeconds = timeLeftTotal % 60; const mmss = [timeLeftMinutes, timeLeftSeconds] .map((s) => String(s).padStart(2, "0")) .join(":"); return <div>Time left: {mmss}</div>; } function getDeadline(secondsInFuture) { return new Date(+new Date() + secondsInFuture * 1000); } function App() { const [deadline, setDeadline] = React.useState(() => getDeadline(120)); return ( <div className="App"> <CountdownTimer deadline={deadline} /> <hr /> <button onClick={() => setDeadline(getDeadline(60))}> Reset deadline to 1 minute in the future </button> </div> ); } ReactDOM.render(<App />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script> <div id="root"></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta