Tengo un temporizador de cuenta regresiva que funciona y he agregado una declaración if para abordar la adición de un cero anterior a las horas, minutos y segundos cuando es menos de 10; sin embargo, siguen apareciendo dígitos individuales sin el relleno. ¿Puede decirme qué hice mal con mi declaración if o el uso de this.state?
import React,{Component} from "react"; class Countdown extends Component{ constructor(props){ super(props); this.state={ hours:"00", minutes:"00", seconds:"00" } } componentDidMount(){ let countDownDate = new Date(); countDownDate.setHours(24,0,0,0); setInterval( function () { let now = new Date().getTime(); let timeleft = countDownDate - now; this.setState({ hours: Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes: Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((timeleft % (1000 * 60)) / 1000) }); }.bind(this), // we added the binding here 1000 ); if (this.state.hours < 10) { this.state.hours = "0"+this.state.hours; } if (this.state.minutes < 10) { this.state.minutes = "0"+this.state.minutes; } if (this.state.seconds < 10) { this.state.seconds = "0"+this.state.seconds; } } render(){ return ( <> <div className="countdown-timer"> <div className = "countdown-text"> <p>DEAL ENDS<br></br> Hrs: Min: Sec:</p> </div> <div className="countdown-time"> <p>{this.state.hours}:{this.state.minutes}:{this.state.seconds} </p> </div> </div> </> ) } } export default Countdown;No puede cambiar el valor del estado directamente, esto no volverá a generar el componente de reacción, debe cambiar el valor del estado usando solo this.setState, a continuación encontrará el código modificado, que puede verificar.
import React,{Component} from "react"; class Countdown extends Component{ constructor(props){ super(props); this.state={ hours:"00", minutes:"00", seconds:"00" } } componentDidMount(){ let countDownDate = new Date(); countDownDate.setHours(24,13,0,0); setInterval( function () { let now = new Date().getTime(); let timeleft = countDownDate - now; const hour = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeleft % (1000 * 60)) / 1000); this.setState({ hours: hour >= 10 ? hour : "0" + hour, minutes: minutes >= 10 ? minutes : "0" + minutes, seconds: seconds >= 10 ? seconds : "0" + seconds, }); }.bind(this), // we added the binding here 1000 ); } render(){ return ( <> <div className="countdown-timer"> <div className = "countdown-text"> <p>DEAL ENDS<br></br> Hrs: Min: Sec:</p> </div> <div className="countdown-time"> <p>{this.state.hours}:{this.state.minutes}:{this.state.seconds} </p> </div> </div> </> ) } } export default Countdown;No es necesario agregar sentencias if. Simplemente verifique las condiciones en su propia expresión JSX de esta manera: <p>{this.state.hours < 10 ? "0" + this.state.hours : this.state.hours} : {this.state.minutes < 10 ? "0" + this.state.minutes : this.state.minutes : {this.state.seconds < 10 ? "0" + this.state.seconds : this.state.seconds}</p> . Debería funcionar, probado. Enlace a la zona de pruebas de trabajo
Su código resultante a continuación:
import React, { Component } from "react"; class Countdown extends Component { constructor(props) { super(props); this.state = { hours: "00", minutes: "00", seconds: "00" }; } componentDidMount() { let countDownDate = new Date(); countDownDate.setHours(24, 0, 0, 0); setInterval( function () { let now = new Date().getTime(); let timeleft = countDownDate - now; this.setState({ hours: Math.floor( (timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ), minutes: Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((timeleft % (1000 * 60)) / 1000) }); }.bind(this), // we added the binding here 1000 ); } render() { return ( <> <div className="countdown-timer"> <div className="countdown-text"> <p> DEAL ENDS<br></br> Hrs: Min: Sec: </p> </div> <div className="countdown-time"> <p> {this.state.hours < 10 ? "0" + this.state.hours : this.state.hours} : {this.state.minutes < 10 ? "0" + this.state.minutes : this.state.minutes} : {this.state.seconds < 10 ? "0" + this.state.seconds : this.state.seconds}{" "} </p> </div> </div> </> ); } } export default Countdown;