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->setUser
y 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.