Como dice esta respuesta de stackoverflow, intenté crear un temporizador de cuenta regresiva para mi proyecto como se muestra a continuación.

constructor(props: Object) {
  super(props);
  this.state ={ timer: 3,hideTimer:false}
}

componentDidMount(){
  this.interval = setInterval(
    () => this.setState({timer: --this.state.timer}),
    1000
  );
}

componentDidUpdate(){
  if(this.state.timer === 0){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }
}

render() { 
  return (
    <View style={{ flex: 1, justifyContent: 'center', }}>
      <Text> {this.state.timer} </Text>
    </View>
 )
}

Sin embargo, después de agregar setState en la función componentDidUpdate, dije que obtendría el siguiente error,

Invariant Violation: Maximum update depth exceeded

Dado que solo estoy tratando de obtener el estado en componentDidMount si y solo si el tiempo es igual a 0, no entiendo por qué obtengo el error anterior porque ese código solo se ejecuta solo una vez y después del estado establecido, el intervalo de tiempo también se aclara .

Entonces, ¿alguien puede explicar por favor qué estoy haciendo mal aquí? Gracias.

0
Ryan94 16 oct. 2018 a las 20:39

2 respuestas

La mejor respuesta

El problema es tu lógica componentDidUpdate:

componentDidUpdate(){
  if(this.state.timer === 0){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }

Cuando llamas a this.setState({hideTime: true}) tu componentDidUpdate lógica se vuelve a visitar y, dado que this.state.timer será 0 en ese momento, ya que no has reiniciado el temporizador (componentDidMount solo se llamará una vez después de su renderizado inicial y no en la actualización)

No estoy completamente seguro de lo que está tratando de lograr y con qué está trabajando, pero este cambio debería ayudar

componentDidUpdate(){
  if(this.state.timer === 0 && !this.state.hideTimer){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }

Así que al configurar hideTime:true y luego compararlo con ese valor, puede evitar el bucle setState infinito. Si esa verificación no funciona para lo que está tratando de lograr, entonces tendrá que usar una lógica diferente, pero con suerte obtendrá la idea.

2
Robbie Milejczak 16 oct. 2018 a las 18:42

La respuesta a su pregunta está en la descripción del error en sí. dice:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Lo que significa que no debe actualizar el estado en el gancho componentDidUpdate.

Si simplemente elimina this.setState({hideTimer:true}) de componentDidUpdate(), esto debería funcionar bien.

https://codesandbox.io/embed/l50586k4q

0
Sandip Nirmal 16 oct. 2018 a las 18:28