Hice un temporizador de cuenta regresiva en React usando ganchos useState y useEffect; todo funciona muy bien, sin embargo, el operador condicional ternario por segundos, donde antepongo 0 y reemplazo el valor del contador 0 con 00 para fines de visualización, parece un poco excesivo. ¿Hay alguna forma de simplificar/acortar esto, tal vez configurando Math.floor((counter % (1000 * 60)) / 1000) a una variable en el return () ? No estoy seguro de cómo hacer esto en React.
return ( <div className={styles.timer}> <span className={styles.minutes}> {Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))} </span> <span className={styles.colon}>:</span> <span className={styles.seconds}> {Math.floor((counter % (1000 * 60)) / 1000) === 0 ? `00` : Math.floor((counter % (1000 * 60)) / 1000) < 10 ? `0${Math.floor((counter % (1000 * 60)) / 1000)}` : Math.floor((counter % (1000 * 60)) / 1000) } </span> </div> )Conviértalo en una cadena, luego .padStart con '0' a 2 caracteres.
<span className={styles.seconds}> { String(Math.floor((counter % (1000 * 60)) / 1000)) .padStart(2, '0') } </span>Simplemente puede mover esta lógica en alguna función y llamar a esa función aquí.
handleCounter = (counter) => { let floorValue = Math.floor((counter % (1000 * 60)) / 1000) if(floorValue < 10){ return '0' + floorValue } else { return '' + floorValue } } return ( <div className={styles.timer}> <span className={styles.minutes}> {Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))} </span> <span className={styles.colon}>:</span> <span className={styles.seconds}> {this.handleCounter(counter)} </span> </div> )Creo que es un poco excesivo también. No podrá definir la variable en el método de devolución, sino que puede resolver ese problema de esta manera. Puede agregar el count de estado que tiene el valor de Math.floor((counter % (1000 * 60)) / 1000)
Entonces el componente sería así.
function Timer () { const [ counter, setCounter ] = useState(0) const [ count, setCount ] = useState(0) useEffect(() => { var timer setTimeout(timer = function () { setCounter(counter + 1000) setCount(Math.floor(((counter + 1000) % (1000 * 60)) / 1000)) }, 1000) return () => { clearTimeout(timer) } }, [counter]) return ( <div style={{color: 'white'}}> <span> {Math.floor(count / 60)} </span> <span>:</span> <span> {count === 0 ? `00` : count < 10 ? `0${count}` : count } </span> </div> ) }Espero que esto sea útil para ti..