2

estoy usando React con Typescript y quisiera poder cambiar varios campos de un objeto, uso el hook useState.

El objeto tiene una interfaz así:

interface iu {
   nombre: string;
   num_seguidores: number;
   siguiendo: boolean;
}

El useState esta definido así:

const [user, setUser] = React.useState<iu>({
   nombre: "Luis",
   num_seguidores: 0,
   siguiendo: false
}):

Tambien cree un método para poder cambiar el estado user así:

const cambiarUser = (_campo: string, _valor: any) => {
   setUser({
      ...user,
      [_campo]: _valor
   });
}

Entonces en cualquier parte del código, al llamar a cambiarUser si funciona, ejemplo:

cambiarUser("nombre", "Luiss");

Mi problema es cuando quiero cambiar dos campos a la vez, por ejemplo, num_seguidores y siguiendo:

cambiarUser("num_seguidores", user.num_seguidores + 1);
cambiarUser("siguiendo", true);

Solo me actualiza el ultimo campo, que seria siguiendo, pero num_seguidores no cambia 😥.

4
  • Actualicé la respuesta, agregando el tema de funcional updates. saludos
    – g.4
    Commented el 12 abr. 2021 a las 23:23
  • .@DJLuis ¿Tienes Feedback, las respuestas son de utilidad? Saludos
    – g.4
    Commented el 14 abr. 2021 a las 19:40
  • Muchas gracias @g.4 Me ayudaste muchísimo. Aunque no comprendo del todo la lógica cuando usaste useReducer
    – DJLuis
    Commented el 22 abr. 2021 a las 21:57
  • .@DJLuis se actualizó la respuesta explicando el procedimiento con useReducer, saludos
    – g.4
    Commented el 28 abr. 2021 a las 20:13

1 respuesta 1

0

Cuando se hace la llamada a setUser de esta forma:

const cambiarUser = (_campo: string, _valor: any) => {
       setUser({
          ...user,
          [_campo]: _valor
       });
}

function handler(){
    cambiarUser("num_seguidores", user.num_seguidores + 1);
}

ReactJS toma la última captura en scope para el estado user:

{
   nombre: "Luis",
   num_seguidores: 0,
   siguiendo: false
}

Se actualiza el estado para num_seguidores y reactJS devuelve el componente. Hasta aquí afirmamos nuestro conocimiento de la devolución de componentes, despues de actualizar un estado:

{nombre: "Luis", num_seguidores: 1, siguiendo: false}

La captura de user no ha cambiado, ReactJS aún no devuelve

Pero, cuando se hace la llamada a setUser en multiples ocaciones dentro del mismo scope handler, JS no espera a que el primer cambiarUser->setUser(operación asincrónica) regrese de la lista de tareas con el state user actualizado (nueva captura), para luego ejecutar el siguiente cambiarUser->setUsery así sucesivamente... No, JS continua su ejecución...

Mas detalles en los comentarios a continuación:

    function handler(){
        cambiarUser("num_seguidores", user.num_seguidores + 1);
        //ReactJS: cambiarUser scheduled asycn op in task queue
        //Current state in handler scope ->prevState 
        //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
        //JS : aun no regreso, continuo
        cambiarUser("nombre", "Luiss");
        //ReactJS: cambiarUser scheduled asycn op in task queue
        //Current state in handler scope ->prevState 
        //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
        //JS: aun no regreso continuo
        cambiarUser("siguiendo", true);
        //ReactJS: cambiarUser scheduled asycn op in task queue
        //Current state in handler scope ->prevState 
        //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
        //JS: ya no hay nada, regresa funcion handler al call stack
        //ejecucion de async scheduled tasks
        //ReactJS: ejecuto cambiaUser para num_seguidores:1
        //prevState: captura actual en este scope
        //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
        //newState
        //{nombre: "Luis", num_seguidores: 1, siguiendo: false}
        //ReactJS: ejecuto cambiaUser para nombre:Luiss
        //prevState: captura actual en este scope
        //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
        //newState
        //{nombre: "Luiss", num_seguidores: 0, siguiendo: false}
        //ReactJS: ejecuto cambiaUser para siguiendo:true
        //prevState: captura actual en este scope
        //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
        //newState
        //{nombre: "Luis", num_seguidores: 0, siguiendo: true}
        
    }

Nótese que hasta este punto, el estado user (prevState) no ha cambiado, la captura de user sigue siendo la misma que al inicio de la App durante la ejecución de las operaciones asincrónicas cambiaUser->setUser, JS sigue en el mismo scope handler y ReactJS aún no devuelve aquí:

    cambiarUser("siguiendo", true);
    //JS hanlder: esto es lo que tengo capturado en memoria para user, pues no he devuelto
    //user = {nombre: "Luis", num_seguidores: 0, siguiendo: false}
    //...
    const cambiarUser = (_campo: string, _valor: any) => {
        setUser({
            ...user,
           [_campo]: _valor //siguiendo: true
        });
    }

Por lo tanto, después de que ReactJS devuelve nuevamente el componente (re-render), como resultado se obtiene:

{nombre: "Luis", num_seguidores: 0, siguiendo: true}

Functional Updates

Una forma de hacer que este diseño, con propiedad computada ES6 funcione, es usando el hook useState en su version callback para functional updates, el cual nos permite obtener la captura del estado previo, modificar y regresar su nuevo estado para llamadas consecutivas al setter setState que esten en el mismo scope, en este caso todas las llamadas a cambiaUser dentro de la funcion handler.

Para regresar el nuevo estado, dado que es un objeto, se usa el operador elipsis.

Dejo una demostración:

function App(){
  const [state,setState] = React.useState({nombre: "Luis", num_seguidores: 0, siguiendo: false})
  
  
  const cambiarUser = (_campo, _valor) => {
    //version callback del setter de useState
    setState(prevState => {
      return {...prevState, [_campo]: _valor}
    })
  }
  
  function handler(){
    cambiarUser("num_seguidores", state.num_seguidores + 1);
    cambiarUser("nombre", "Luiss");
    cambiarUser("siguiendo", true);
    //JS: ya no hay nada, regresa funcion handler al call stack
    //ejecucion de async scheduled tasks
    //ReactJS: ejecuto cambiaUser para num_seguidores:1
    //prevState: captura actual en este scope
    //{nombre: "Luis", num_seguidores: 0, siguiendo: false}
    //newState
    //{nombre: "Luis", num_seguidores: 1, siguiendo: false}
    //ReactJS: ejecuto cambiaUser para nombre:Luiss
    //prevState: tomo el prevState del callback setState
    //{nombre: "Luis", num_seguidores: 1, siguiendo: false}
    //newState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: false}
    //ReactJS: ejecuto cambiaUser para siguiendo:true
    //prevState: tomo el prevState del callback setState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: false}
    //newState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: true}
  }
  console.log("state is", state)
  return <button onClick={handler}>Click me</button>
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>


Actualización

Aunque no comprendo del todo la lógica cuando usaste useReducer

En la documentación de reactJS se recomienda usar el hook useReducer para casos de este típo.

El Hook useReducer puede configurarse de diferentes formas, el patrón mas común es usar una función reducer, la cual recibirá dos argumentos, el state (enviado implícitamente) y un objeto action.

Pero, para este caso de uso, en vez de action se va a pasar el cambio de estado, en su forma propiedad computada [property]:value como newState:

function reducer(state, newState){
  //...
}

Luego, como el cambio de estado newState es un objeto con una sola propiedad computada, se debe buscar la forma de obtener el nombre de la propiedad, para poder cambiar su nuevo valor en la estructura del objeto state.

Se propone el operador elipsis, para actualizar propiedades del objeto state durante una operación de propagación:

//la propagacion regresa el estado, mas un nuevo objeto
//simulando la propagacion
//{nombre: "Luis", num_seguidores: 0, siguiendo: false, {[property]:value}}
return {...state, newState}

En el ejemplo anterior, se esta regresando el objeto state, buscando que durante la iteración con el operador elipsis, JS vea la propiedad y cambie su valor; pero la propiedad computada se inserta como un objeto durante la iteración, mutando el objeto state. (función reducer impura)

Una solución a este problema, es propagar el objeto newState, que solamente tiene un parametro; de esta forma JS identifica el parametro durante la iteración y cambia su valor, regresando la estructura state original (función reducer pura):

//la propagacion regresa el estado y solo modifica
//el valor de la propiedad en newState
//simulando la propagacion
    //{nombre: "Luis", num_seguidores: 0, siguiendo: false, siguiendo: true}
//la propiedad siguiendo tiene un nuevo valor, se actualiza
//{nombre: "Luis", num_seguidores: 0, siguiendo: true}
    return {...state, ...newState}

Se propone esta función reducer con operador elipsis, porque en tu diseño original estas usando propiedades computadas ES6.

Dejo la demostración para que quede documentado:

function reducer(state, newState){
  return {...state, ...newState};
}

const initState = {
  nombre: "Luis", 
  num_seguidores: 0, 
  siguiendo: false
}

function App(){
  const [state, setState] = React.useReducer(
    reducer,
    initState
  );
  
  const cambiarUser = (_campo, _valor) => {        
     setState({
       [_campo]: _valor
      })
  }
  
  function handler(){
    cambiarUser("num_seguidores", state.num_seguidores + 1);
    cambiarUser("nombre", "Luiss");
    cambiarUser("siguiendo", true);
  }
  console.log("state is", state)
  return <button onClick={handler}>Click me</button>
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Espero que esta respuesta sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.