Grupo de React
Este grupo esta relacionado con nuestro curso profesional de React. Aquí se comparten temas generales... View more
organizador:
- Organizado por
-
Temas State y Props
Temas State y Props
Hola, tengo una duda.
Siguiendo los pasos del instructor.
La primera función si me realiza el incremento de 1.
Pero la segundo función, lo realiza de 2, cuando deberia incrementar en 1.
La tercera función, realiza el incremente en 4, cuando deberia ser en 2.
Me pueden apoyar, en que me equivoqué.
De antemano, Gracias
Agrego codigo fuente.
/* CLASS COMPONENT */
//import React from “react”;
//class UserComponent extends React.Component {
import React, {Component} from “react”;
import Profile from “./profile”;
class UserComponent extends Component {
constructor() {
super();
this.state = {
name: ‘Adolfo’,
lastName: ‘Morales’,
age: 27,
gender: ‘Male’,
email: ‘adolfo.morales@correo.com’,
counter: 0
};
};
sayHello = () => {
console.log(“Hola a todos”)
};
/*incrementCounterValue = () => {
let {counter} = this.state
this.setState({
counter: counter += 1
});
};*/
incrementCounterValue = () => {
this.setState(prevState => {
return prevState.counter += 1;
});
};
incrementCounterValue2 = () => {
this.setState(prevState => {
return prevState.counter += 2
});
};
//Se va a llamar cuando se el componentes
render() {
const {
name,
lastName,
age,
gender,
email,
counter
} = this.state
return( //Retorna JSX
<>
<h1>Hola mundo a toas la comunidad de Azul School</h1>
Mi nombre es: {name} {lastName}
Tengo {age} anios
Soy {gender}
Mi correo electronico es {email}
<button
onClick = {
() => this.incrementCounterValue()
}
>
Dale clic para incrementar
</button>
Contador: {counter}
{/*<Image />*/}
<Profile
name={name}
lastName={lastName}
email={email}
counter={counter}
incrementCounterValue2={this.incrementCounterValue2}
/>
</>
)
}
}
export default UserComponent;
import React from “react”;
/*const Profile = () => {
console.log(“Hola soy el Profile”)
return (
<h1>Soy un componente de funcion</h1>
)
}*/
//Solo para rendeizar JSX, ni usar console.log, manipular data
/*const Profile = () => (
<h1>Hola soy mas sencillo</h1>
)*/
const Profile = (props) => (
<>
<h1>COMPONENTE DE PERFIL</h1>
Nombre del cliente: {props.name}
Apellidos del cliente: {props.lastName}
Correo electronico: {props.email}
<h3>Valor del contados: {props.counter}</h3>
<button onClick={props.incrementCounterValue2}>Incrementa +2 el contador</button>
</>
)
//function Profile() {
// return (
// <h1>Soy un componente de funcion</h1>
// )
//}
export default Profile;
- 1 Responde
Hola, la segunda función, incrementCounterValue, está incrementando el valor del contador en 1 en cada llamada, pero lo está haciendo de manera incorrecta.
En lugar de devolver un objeto que contenga la actualización del valor del estado, como debería hacerse en setState, la función de flecha dentro de setState está devolviendo el valor del contador incrementado en 1 (prevState.counter += 1). Esto hace que el valor del estado se actualice incorrectamente, y cada vez que se llama a incrementCounterValue, el valor del contador se incrementa en 2 en lugar de en 1.
Para corregir esto, la función de flecha dentro de setState debe devolver un objeto que contenga la actualización del valor del estado, como se muestra a continuación:
incrementCounterValue = () => {
this.setState(prevState => {
return { counter: prevState.counter + 1 };
});
};
En cuanto a la tercera función, incrementCounterValue2, también está incrementando el valor del contador de manera incorrecta. Al igual que en la segunda función, la función de flecha dentro de setState está devolviendo el valor del contador incrementado en 2 (prevState.counter += 2), lo que hace que el valor del estado se actualice incorrectamente y el contador se incremente en 4 en cada llamada.
Para corregir esto, la función de flecha dentro de setState debe devolver un objeto que contenga la actualización del valor del estado, pero incrementando el valor del contador en 2 en lugar de en 4:
incrementCounterValue2 = () => {
this.setState(prevState => {
return { counter: prevState.counter + 2 };
});
};
En resumen, lo que pasa es que tu código retorna la operación ‘prevState.counter += 1’ en vez del resultado de la misma.
Inicia sesión para responder.