Si te encuentras con algún detalle que no comprendes puedes comentarlo y te ayudaremos tan rápido como podamos.
Solución:
prevState
es un nombre que le ha dado al argumento pasado a la función de devolución de llamada setState. Lo que contiene es el valor del Estado ante el setState
fue activado por React; Ya que setState
hace el procesamiento por lotes, a veces es importante saber cuál era el estado anterior cuando desea actualizar el nuevo estado en función del valor del estado anterior.
Por lo tanto, si varias llamadas a setState están actualizando el mismo estado, el procesamiento por lotes de llamadas a setState puede provocar que se establezca un estado incorrecto. Considere un ejemplo:
state =
count: 0
updateCount = () =>
this.setState( count: this.state.count + 1);
this.setState( count: this.state.count + 1);
this.setState( count: this.state.count + 1);
this.setState( count: this.state.count + 1);
En el código anterior, puede esperar que el valor de count sea 4, pero en realidad sería 1, ya que la última llamada a setState anulará cualquier valor anterior durante el procesamiento por lotes. Una forma de resolver esto para usar setState funcional:
updateCount = () =>
this.setState(prevstate => ( count: prevstate.count + 1));
this.setState(prevstate => ( count: prevstate.count + 1));
this.setState(prevstate => ( count: prevstate.count + 1));
this.setState(prevstate => ( count: prevstate.count + 1));
Lo usa cuando desea anular el estado actual con los parámetros del último estado.
De los documentos de React:
De acuerdo con los documentos de React “React puede procesar por lotes múltiples
setState()
llamadas en una sola actualización para el rendimiento. Porquethis.props
ythis.state
puede actualizarse de forma asíncrona, no debe confiar en sus valores para calcular el siguiente estado”.“Para solucionarlo, utilice una segunda forma de
setState()
que acepta una función en lugar de un objeto. Esa función recibirá el estado anterior como primer argumento, y los accesorios en el momento en que se aplica la actualización como segundo argumento”
Enlace