0

Necesito guardar algo en mi base de datos por lo que tengo que mandar un objeto, este objeto lo tengo en un estado debido a que uso algunas propiedades para el formulario y otras las asigno antes de enviar la petición al servidor

Mi problema es que el estado se actualiza después que hago la petición al servidor y no debería ser así

Este es mi código cuando inicia el componente

const [seguimientoActividad, setSeguimientoActividad] = useState<ISeguimientoActividades>({
    idActividad:0,
    descripcion:'',
    fecha: moment().format('YYYY-MM-DD'),
    idEmpleado: user.idUsuario,
    idEstatus: 0,
});

Este es mi código donde envió la petición al servidor asignando nuevos valores al estado

const guardarSeguimiento = async (idAct: number) => {

    const id = finalizada ? estatus.filter(estatus => estatus.nombre === 'Finalizada')[0].idEstatus : estatus.filter(estatus => estatus.nombre === 'Abierta')[0].idEstatus;
  //Agregando valores al estado
    setSeguimientoActividad({
        ...seguimientoActividad,
        idActividad: idAct,
        idEstatus: id
    });
    console.log(seguimientoActividad) //Me muestra el estado sin los nuevos valores

    const respuesta = await saveSeguimientoActividad(seguimientoActividad);
    if (respuesta) return true;
    return false;
}

El problema es que cuando hago el console.log, el estado aun no se ha actualizado

1
  • Justo después de setState, seguimientoActividad no tiene tiempo para actualizar. Si escribes console.log(seguimientoActividad) en algún otro lugar (fuera de guardarSeguimiento) probablemente verás que se actualiza.
    – milmal
    Commented el 21 ene. 2021 a las 17:42

2 respuestas 2

5

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.

1
  • Es justo lo que necesitaba, solucionó mi problema. Gracias Commented el 21 ene. 2021 a las 19:36
0

Creo que lo que debes hacer es asignar un estado para cada una de las propiedades que estan dentro de ese objeto. De esa manera si ese estado especifico no se modifica, envias el estado que asignaste cuando el componente carga:

En vez de esto const [seguimientoActividad, setSeguimientoActividad] Haz esto:

const [idActividad, setIdActividad] = useState(0);
const [descripcion, setDescripcion] = useState('');
const [fecha, setFecha] = useState(moment().format('YYYY-MM-DD');
const [idEmpleado, setIdEmpleado] = useState(user.idUsuario);
const [idEstatus, setIdEstatus] = useState(0);

Asi estaras controlando cada estado por separado. No olvides asignar el onChange property en el input del formulario

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.