Modificación de estado correcta para React

El estado se puede obtener directamente a través de this.state.{property}, pero existen muchos errores a los que se debe prestar atención al modificar el estado. Aquí hay tres errores comunes.

Modifique el estado directamente y el componente no reactivará el renderizado, por ejemplo:

El método de modificación correcto es utilizar setSate()

Muchos desarrolladores; No No noté que setState es asincrónico. Si modifica un estado y luego lo ve directamente, verá el estado anterior. Esta es la parte más propensa a errores de setState, por ejemplo:

Otro punto a tener en cuenta es que los accesorios se actualizan de forma asincrónica.

Si necesita obtener el valor modificado directamente después de setState, puede utilizar una función de devolución de llamada. El método setState acepta una función como función de devolución de llamada. El método setState acepta una función como función de devolución de llamada que se llamará directamente después de que se complete setState para que pueda obtener el estado más reciente. Por ejemplo:

Al llamar a setState para modificar el estado de un componente, solo necesita pasar el estado modificado, no el estado completo del componente, porque actualizar el estado del componente es un proceso fusionado. Por ejemplo, el estado de un componente es:

Cuando solo es necesario modificar el título, simplemente pase el título modificado a setState:

React fusionará el nuevo título con el estado original del componente , aunque conserva el estado y el contenido originales, el estado fusionado será: