Skip to main content
8 de 10
se añadieron 1516 caracteres en el cuerpo
g.4
  • 3.5k
  • 2
  • 11
  • 22

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, 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 .

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);
  }
  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.

g.4
  • 3.5k
  • 2
  • 11
  • 22