Voy a dar una breve explicación de por qué sucede esto y al mismo tiempo darte una posible solución a lo que quieres hacer.
¿Por qué no veo mi estado actualizado?
Cuando estás utilizando el hook useState
, este te devuelve un valor con estado y una función para actualizarlo.
Durante el renderizado inicial, el estado devuelto (state) es el mismo que el valor pasado como primer argumento (initialState).
Cuando llamas la función setState
, esta recibe un nuevo valor para actualizar el estado del componente, sitúa en la cola una nueva renderización del componente.
¿Esto qué significa?
Cuando colocas el console.log(state)
inmediatamente después de haber llamado el setState
, estas apuntando al valor pasado (que en tu caso es el objeto inicial que le pasas) tal que no verás ninguna actualización hasta que el componente vuelva actualizarse.
En pocas palabras
setState
no cambia tu estado inmediatamente, lo agrega a una lista de "voy a cambiarlo".
Es como decirle a tu componente "Ok componente, llegamos a un acuerdo, y es que en el proximo re-render vas a tener este valor".
¿Qué puedo hacer para solucionarlo?
Aquí es donde viene el hook useEffect
.
Por defecto, los efectos se ejecutan después de cada renderizado completado, pero puede elegir ejecutarlo solo cuando ciertos valores han cambiado.
Teniendo en cuenta esto, lo que quieres hacer es correr el efecto justo cuando el estado seguimientoActividad
cambie.
...
useEffect(() => {
async function saveNuevaActividad(actividad) {
/**
idActividad es un falsy value. Inicialmente esto me dará falso por lo cual
el efecto no va a correr. Cuando lo setees va tener un valor diferente de
cero y va entrar
*/
if (seguimientoActividad.idActividad) {
try {
const respuesta = await saveSeguimientoActividad(seguimientoActividad);
if (respuesta) {
// Aquí console.log(respuesta) te dará el valor que quieres.
}
} catch (error) {
// Maneja los errores en tu petición.
}
}
}
saveNuevaActividad(); // Llamas la función
}, [seguimientoActividad])// Le pasas la dependencia que quieres que dispare este efecto
...
Dame algo para copiar y pegar (?)
Así se vería tu código completo.
const [seguimientoActividad, setSeguimientoActividad] = useState<ISeguimientoActividades>({
idActividad:0,
descripcion:'',
fecha: moment().format('YYYY-MM-DD'),
idEmpleado: user.idUsuario,
idEstatus: 0,
}); // Te recomiendo separar este objeto en varios useState
useEffect(() => {
async function saveNuevaActividad(actividad) {
if (seguimientoActividad.idActividad) {
try {
const respuesta = await saveSeguimientoActividad(seguimientoActividad);
if (respuesta) {
// TODO:
}
} catch (error) {
// TODO:
}
}
}
saveNuevaActividad(); // Llamas la función
}, [seguimientoActividad])
const guardarSeguimiento = async (idAct: number) => {
const id = finalizada ? estatus.filter(estatus => estatus.nombre === "Finalizada")[0].idEstatus : estatus.filter(estatus => estatus.nombre === "Abierta")[0].idEstatus;
const nuevoState = {
...seguimientoActividad,
idActividad: idAct,
idEstatus: id
};
setSeguimientoActividad(nuevoState);
}
En general puedes usar esta plantilla para ejectuar cualquier caso similar. No hay limitaciones en cuanto a la cantidad de useEffect que puedes crear, así que no te preocupes por eso.
Nota: Estoy considerando que saveSeguimientoActividad es algun tipo de función que ya tienes definida y la cual es asíncrona.
setState
,seguimientoActividad
no tiene tiempo para actualizar. Si escribesconsole.log(seguimientoActividad)
en algún otro lugar (fuera deguardarSeguimiento
) probablemente verás que se actualiza.