es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Usando useEffect correctamente al realizar solicitudes a un servidor.

Tengo una función handleRating que establece algún estado así:

const handleRating = (value) => {
  setCompanyClone({
    ...companyClone,
    prevRating: [...companyClone.prevRating, { user, rating: value }]
  });
  setTimeout(() => {
    handleClickOpen();
  }, 600);
};

Creo que también tengo una función que parchea un servidor con los nuevos valores de companyClone de la siguiente manera:

const updateServer = async () => {
  const res = await axios.put(
    `http://localhost:3000/companies/${companyClone.id}`,
    companyClone
  );
  console.log("RES", res.data);
};

Mi función updateServer es llamada en un useEffect. Pero solo quiero que la función se ejecute después de que se actualice el estado. Estoy viendo mi consola de registro console.log cuando cargo mi página. Lo que no quiero es hacer solicitudes a mi servidor hasta que se actualice la matriz companyClone.prevRating.

Mi useEffect:

useEffect(() => {
  updateServer();
}, [companyClone.prevRating]);

¿Cómo puedo evitar que esta función se ejecute cuando se carga la página, pero solo cuando se actualiza companyClone.prevRating?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Puede utilizar una declaración condicional para verificar si el array companyClone.prevRating tiene una longitud mayor que cero antes de llamar a la función updateServer() en el useEffect. Esto significa que la función solo se llamará cuando el array haya sido actualizado y no en la carga inicial de la página. Aquí hay un ejemplo:

    useEffect(() => {
      if (companyClone.prevRating.length > 0) {
        updateServer();
      }
    }, [companyClone.prevRating]);
    

Comments are closed.