Todos los componentes de React pueden tener un estado asociados con ellos. El estado de un componente puede cambiar debido a una respuesta a una acción realizada por el usuario o a un evento desencadenado por el sistema. Cada vez que cambia el estado, React vuelve a representar el componente en el navegador. Antes de actualizar el valor del estado, necesitamos crear una configuración de estado inicial. Una vez que hayamos terminado con esto, usamos el método setState() para cambiar el objeto de estado. Garantiza que el componente se haya actualizado y solicita volver a renderizarlo.

Tabla de contenidos

• Reaccionar JS setState
• Pasos para crear una aplicación React:
• Actualización de múltiples atributos
• Actualización de valores de estado mediante accesorios.
• Actualizando el estado usando su valor anterior.

Reaccionar JS setState

establecer estado es una llamada asincrónica, lo que significa que si se llama a una llamada sincrónica, es posible que no se actualice en el momento adecuado, como saber el valor actual de un objeto después de una actualización usando setState, es posible que no proporcione el valor actualizado actual en la consola. Para obtener algún comportamiento sincrónico, es necesario pasar la función en lugar del objeto a setState.

Sintaxis:

Podemos usar setState() para cambiar el estado del componente directamente o mediante una función de flecha.

setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ nombreEstado: estadoprev.nombreEstado + 1 }))>

Pasos para crear una aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

supw

npx create-react-app foldername>

Paso 2: Después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella usando el siguiente comando:

cd foldername>

Estructura del proyecto:

Enfoque 1: Actualizando un solo atributo

Configuramos nuestro valor de estado inicial dentro función constructora y crear otra función actualizarEstado() para actualizar el estado. Ahora, cuando hacemos clic en el botón, este último se activa como un evento al hacer clic que cambia el valor del estado. Realizamos el método setState() en nuestro función actualizarEstado() escribiendo:

this.setState({greeting : 'GeeksForGeeks welcomes you !!'})>

Como puede ver, estamos pasando un objeto a setState(). Este objeto contiene la parte del estado que queremos actualizar que, en este caso, es el valor de saludo . React toma este valor y lo fusiona con el objeto que lo necesita. Es como si el componente del botón preguntara qué debería usar para actualizar el valor del saludo y setState() respondiera con una respuesta.

JavaScript

>

>

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

npm start>

Producción: Ahora abre tu navegador y ve a http://localhost:3000/ , verá el siguiente resultado:

frijol java

Enfoque 2: Actualización de múltiples atributos

El objeto de estado de un componente puede contener múltiples atributos y React permite usar la función setState() para actualizar solo un subconjunto de esos atributos, así como usar múltiples métodos setState() para actualizar cada valor de atributo de forma independiente.

Establecemos nuestro estado inicial inicializando tres atributos diferentes y luego creamos una función actualizarEstado() que actualiza su valor cada vez que se llama. Una vez más, esta función se activa como una evento al hacer clic y obtenemos los valores actualizados de nuestros estados al mismo tiempo.

JavaScript

>

>

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

npm start>

Producción: Ahora abre tu navegador y ve a http://localhost:3000/ , verá el siguiente resultado:

Enfoque 3: Actualización de valores de estado mediante accesorios.

Configuramos una serie de cadenas. pruebaTemas como accesorios para nuestro componente. Una función lista de temas se crea para asignar todas las cadenas como elementos de lista en nuestro estado temas . La función estado de actualización se activa y establece los temas para enumerar elementos. Cuando hacemos clic en el botón, obtenemos valores de estado actualizados. Este método es bien conocido por manejar datos complejos y actualizar el estado muy fácilmente.

1 millón de números

JavaScript

>

>

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

convertir una fecha en una cadena

npm start>

Producción: Ahora abre tu navegador y ve a http://localhost:3000/ , verá el siguiente resultado:

Enfoque 4: Actualizando el estado usando su valor anterior.

Creamos un estado inicial. contar teniendo un valor de 0. La función actualizarEstado() incrementa el valor actual del estado en 1 cada vez que se llama. Esta vez usamos el método setState() en una función de flecha pasando anteriorEstado como parámetro. Se accede al valor actual del estado con anteriorEstado.nombreEstado que se incrementa en 1 cada vez que presionamos el botón. Este método es realmente útil cuando establecemos un valor en el estado de tal manera que dependa de su valor anterior. Por ejemplo , alternando un valor booleano (verdadero/falso) o incrementando/disminuyendo un número.

JavaScript

>

>

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

códigos de color java

npm start>

Producción: Ahora abre tu navegador y ve a http://localhost:3000/ , verá el siguiente resultado: