Todos los componentes de React pueden tener un estado asociado a ellos. El estado de un componente puede cambiar debido a una respuesta a una acción realizada por el usuario o un evento desenstringdo por el sistema. Cada vez que cambia el estado, React vuelve a renderizar el componente en el navegador. Antes de actualizar el valor del estado, debemos crear una configuración de estado inicial. Una vez que hayamos terminado, usamos el método setState() para cambiar el objeto de estado. Garantiza que el componente se haya actualizado y pide que se vuelva a renderizar el componente.
setState es una llamada asíncrona, lo que significa que si se llama a una llamada síncrona, es posible que no se actualice en el momento adecuado, como saber el valor actual del objeto después de la actualización usando setState, es posible que no se 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, así como a través de una función de flecha.
setState({ stateName : updatedStateValue })
// OR
setState((prevState) => ({
stateName: prevState.stateName + 1
}))
Creando la aplicación React:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
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 con el siguiente comando:
cd foldername
Ejemplo 1: Actualización de un solo atributo.
Configuramos nuestro valor de estado inicial dentro de la función constructora y creamos otra función updateState() para actualizar el estado. Ahora, cuando hacemos clic en el botón, este último se activa como un evento onClick que cambia el valor del estado. Realizamos el método setState() en nuestra función updateState() 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 greeting . 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() responde con una respuesta.
App.js
import React, { Component } from 'react'
class App extends Component {
constructor(props){
super(props)
// Set initial state
this.state = {greeting :
'Click the button to receive greetings'}
// Binding this keyword
this.updateState = this.updateState.bind(this)
}
updateState(){
// Changing state
this.setState({greeting :
'GeeksForGeeks welcomes you !!'})
}
render(){
return (
<div>
<h2>Greetings Portal</h2>
<p>{this.state.greeting}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
)
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Ejemplo 2: Actualización de varios 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 updateState() que actualiza su valor cada vez que se llama. Una vez más, esta función se activa como un evento onClick y obtenemos los valores actualizados de nuestros estados al mismo tiempo.
App.js
import React, { Component } from 'react'
class App extends Component {
constructor(props){
super(props)
// Set initial state
this.state = {
test: "Nil",
questions: "0",
students: "0"
}
// Binding this keyword
this.updateState = this.updateState.bind(this)
}
updateState(){
// Changing state
this.setState({
test: 'Programming Quiz',
questions: '10',
students: '30'
})
}
render(){
return (
<div>
<h2>Test Portal</h2>
<p>{this.state.test}</p>
<p>{this.state.questions}</p>
<p>{this.state.students}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
)
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Ejemplo 3: Actualización de valores de estado usando props.
Configuramos una array de strings testTopics como accesorios para nuestro componente. Se crea una función listOfTopics para mapear todas las strings como elementos de lista en nuestros temas de estado . La función updateState 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.
App.js
import React, { Component } from 'react'
class App extends Component {
static defaultProps = {
testTopics : [
'React JS', 'Node JS', 'Compound components',
'Lifecycle Methods', 'Event Handlers',
'Router', 'React Hooks', 'Redux',
'Context'
]
}
constructor(props){
super(props)
// Set initial state
this.state = {
testName: "React js Test",
topics: ''
}
// Binding this keyword
this.updateState = this.updateState.bind(this)
}
listOfTopics(){
return (
<ul>
{this.props.testTopics.map(topic => (
<li>{topic}</li>
))}
</ul>
)
}
updateState(){
// Changing state
this.setState({
testName: 'Test topics are:',
topics: this.listOfTopics()
})
}
render(){
return (
<div>
<h2>Test Information</h2>
<p>{this.state.testName}</p>
<p>{this.state.topics}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
)
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Ejemplo 4. Actualizar el estado usando su valor anterior.
Creamos un conteo de estado inicial que tiene un valor de 0. La función updateState() 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 prevState como parámetro. Se accede al valor actual del estado con prevState.stateName, que se incrementa en 1 cada vez que presionamos el botón. Este método es realmente útil cuando estamos configurando un valor en el estado de tal manera que depende de su valor anterior. Por ejemplo , alternar un booleano (verdadero/falso) o incrementar/decrementar un número.
App.js
import React, { Component } from 'react'
class App extends Component {
constructor(props){
super(props)
// Set initial state
this.state = {
count: 0
}
// Binding this keyword
this.updateState = this.updateState.bind(this)
}
updateState(){
// Changing state
this.setState((prevState) => {
return { count: prevState.count + 1}
})
}
render(){
return (
<div>
<h2>Click Counter</h2>
<p>You have clicked me {this.state.count} times.</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
)
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por gurjotloveparmar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA