0
115
Viewscómo el temporizador de cuenta regresiva muestra dos ceros en React + Typescript
En mi proyecto, necesito usar un temporizador de cuenta regresiva durante 2 minutos. En este proyecto se utilizan React, TypeScript y ant design. Estoy usando React versión 18.2.0. Diseñé este temporizador y funciona correctamente, pero tiene un pequeño problema. Solo quiero que muestre 09 en lugar de 9, por ejemplo, cuando los números estén por debajo de 10 (como la foto de abajo). te agradeceria si me pudieras orientar. 
.timer{ border: 1px solid red; padding: 1rem; width: 150px; height: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import React, { useState, useEffect } from "react"; const [seconds, setSeconds] = useState<number>(59); const [minutes, setMinutes] = useState<number>(1); useEffect(() => { let timeInterval = setTimeout(() => { if (seconds > 0) { setSeconds(seconds - 1); } if (seconds === 0) { if (minutes === 0) { clearInterval(timeInterval); } else { setMinutes(minutes - 1); setSeconds(59); } } }, 1000); return ()=> { clearInterval(timeInterval); }; }); <div class="timer"> <p> {minutes}:{seconds} </p> </div>1 answers
Answer question0
Según yo, puede hacer uso de una o dos declaraciones useEffect (según su preferencia) y dos useStates más para lograr esto. Los dos nuevos useStates serían formattedSeconds y formattedMinutes. useEffect se ejecuta cuando cambia el estado de los segundos y los minutos y luego, si son menos de 10, agrega un cero inicial a su valor de cadena. De lo contrario, simplemente devuelve el mismo valor. Al final, muestra los estados recién creados en lugar de los que devuelve y hará el trabajo. Escribí un fragmento de código para demostrar esto para un solo número, pero puedes hacer exactamente lo mismo para un segundo valor de estado. El código:
export default function App() { const [number, setNumber] = useState(0); const [formattedNumber, setFormattedNumber] = useState(""); useEffect(() => { if (number < 10) { const numberString = "0" + number.toString(); setFormattedNumber(numberString); return; } const numberString = number.toString(); setFormattedNumber(numberString); }, [number]); return ( <div className="App"> <input type="number" value={number} onChange={(e) => setNumber(e.target.value)} /> <h1>{formattedNumber}</h1> </div> ); }¡Espero que esto ayude! Avísame si necesitas ayuda con algo.