Skip to main content
3 de 10
cuerpo editado
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}

ReactJS sigue en el mismo scope

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

    function handler(){
        cambiarUser("num_seguidores", user.num_seguidores + 1);
        //JS : aun no regreso, continuo
        cambiarUser("nombre", "Luiss");
        //JS: aun no regreso continuo
        cambiarUser("siguiendo", true);
       //JS: ya no hay nada, regresa funcion handler al call stack
    }

Entonces, ReactJS va a aplicar el cambio de estado para la última llamada de cambiaUser->setUser, nótese que hasta este punto el estado user no ha cambiado, la captura sigue siendo la misma que al inicio, JS sigue en el mismo scope y ReactJS aún no devuelve aquí:

    cambiarUser("siguiendo", true);
    //JS: 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}

Hook useReducer

Una forma de hacer que este diseño, con propiedad computada ES6 funcione, es usando el hook useReducer, el cual nos permite obtener la captura del estado actual y modificar su nuevo estado.

Dejo una demostración:

function App(){
  const [state, setState] = React.useReducer(
    (state, newState) => ({...state, ...newState}),
    {nombre: "Luis", num_seguidores: 0, siguiendo: false}
  );
  
  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