0

tengo un problema con el hook useffect. Lo que pasa es que cuando quiero hacer un fetch al renderizar un componente este se ejecuta multiples veces.

introducir la descripción de la imagen aquí

Lo que hago es lo siguiente:

      let getDataTable = async () => {
        try {
            fetch("http://localhost:3002/api/v1/Login", {
                method: "POST",
                mode: "cors",
                cache: "no-cache",
                credentials: "same-origin",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({
                  UserName: "TEST",
                  Password: "2022",
                  CompanyDB: "TEST",
                }),
              });
        }
         catch (error) {
          }
      };

      useEffect(() => {
        getDataTable();
      }, []);
    

Intenté hacer el fetch dentro del useEffect pero es lo mismo, lo hace multiples veces y no entiendo aún el problema. Estoy usando NextJS.

1
  • 2
    Con este código que veo no veo porque se ejecute más veces, lo mejor sería que pusieras el componente entero para ver que puede estar pasando
    – Suso
    el 8 jul. 2022 a las 20:01

1 respuesta 1

0

Un problema de esto es que tu componente se esta renderizando multiples veces, puedes remover el strictmode para evitar esto, y de igual manera recomiendo usar el useCallback el cual te hace controlar mejor cuando renderizar una funcion en especifico:

  let getDataTable = useCallback(async () => {
    try {
        fetch("http://localhost:3002/api/v1/Login", {
            method: "POST",
            mode: "cors",
            cache: "no-cache",
            credentials: "same-origin",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              UserName: "TEST",
              Password: "2022",
              CompanyDB: "TEST",
            }),
          });
    }
     catch (error) {
      }
  },[])

  useEffect(() => {
    getDataTable();
  }, []);

Espero te sirva amigo.

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.