fbpx

Temas State y Props

  • Temas State y Props

    Posted by Adolfo Angel on 19 abril, 2023 en 11:41 pm

    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;

    Angel Sánchez respondido 12 meses 2 Miembros · 1 Responde
  • 1 Responde
  • Angel Sánchez

    organizador
    20 abril, 2023 en 4:34 pm

    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.

Start of Discussion
0 de 0 respuestas Junio 2018
Ahora