0

tengo el siguiente componente(adjunto codigo) y no puedo hacer que cuando llegue a 20 se limpie el contador.

export class Contador extends React.Component {
 constructor(props) {
 super(props);
  this.state = { conta: 0 };
}

componentDidMount() {
  this.contaID = setInterval(() => this.aumento(), 100);
}

componentWillUnmount() {
 clearInterval(this.contaID);
} 

aumento() {
  this.setState({
    conta: this.state.conta + 1
  });
}

render() {
  return (
    <div>
      <h1>Como Avanza el Contador</h1>
      <h3>{Math.floor((this.state.conta / 1000) % 10)}</h3>
      <h3>{Math.floor(this.state.conta / 100) % 10}</h3>
      <h3>{Math.floor(this.state.conta / 10) % 10}</h3>
      <h3>{Math.floor(this.state.conta / 1) % 10}</h3>
    </div>
  );
 }
}

ReactDOM.render(<Contador />, document.getElementById("root"));
2
  • A qué te refieres con limpiar el contador? Que retorne a cero? el 6 abr. 2019 a las 4:03
  • @nauseantparrot que se limpie el intervalo, cuando llegue por ejemplo a 3000 el 6 abr. 2019 a las 13:54

1 respuesta 1

0

Puedes agregar a tu estructura JSON de estado una key que almacene el identificador del intervalo, y dentro del callback del intervalo se evalúe el valor del contador previamente a aumentar su valor.

export class Contador extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            conta: 0,
            contaId: null
        }
        this.intervalCallback = this.intervalCallback.bind(this)
    }

    intervalCallback() {
        if (this.state.conta >= 3000) {
            clearInterval(this.state.contaId)
            return
        }
        this.setState({
            conta: this.state.conta + 1
        })
    }

    componentDidMount() {
        this.setState({
            contaId: setInterval(this.intervalCallback, 100)
        })
    }

    componentWillUnmount() {
        clearInterval(this.state.contaId)
    }

    render() {
        return (
            <div>
                <h1>Como Avanza el Contador</h1>
                <h3>{Math.floor((this.state.conta / 1000) % 10)}</h3>
                 <h3>{Math.floor(this.state.conta / 100) % 10}</h3>
                <h3>{Math.floor(this.state.conta / 10) % 10}</h3>
                <h3>{Math.floor(this.state.conta / 1) % 10}</h3>
            </div>
        )
    }
}

ReactDOM.render(<Contador />, document.getElementById('root'))
2

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.