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