FetchAPI no hace una solicitud después de 2 llamadas.

He creado un componente de React que actúa como un menú emergente para una tabla (específicamente una ag-grid), lo que significa que este componente se renderiza cada vez que se abre una celda de la tabla y luego se desmonta/elimina cada vez que se cierra la celda.

Este componente que he creado realiza una llamada a FetchAPI dentro de su useEffect, de manera que una vez que se recibe los datos necesarios para el componente mediante un GET, vuelve a renderizar el componente con los datos.

Código:

const myPopup = forwardRef((props, ref) => { const [componentData, setComponentData] = useState({}); useEffect(() => { fetch('myurl.com/getdata/1') //hacer fetch desde la URL .then((response) => response.json()) .then((data) => setComponentData(data)); //establecer el hook de datos del componente con la respuesta (debería desencadenar otro renderizado con los datos de la respuesta) }, []); console.log(componentData); });

Cuando abro una celda de la tabla por primera vez, el componente se muestra exactamente como se espera, y la consola muestra dos cosas:

{} //del estado/rendereo inicial del componente {1:'res', 2:'imm',...} //los datos cargados (del segundo renderizado después de que se establece componentData con el resultado de FetchAPI)

Cuando abro una celda de la tabla por segunda vez, lo mismo: funciona como se espera.

Cuando abro una celda de la tabla por tercera vez, mi componente se renderiza con {} (el estado inicial) y el renderizado nunca ocurre con los datos de FetchAPI. Al mirar la consola, todo lo que tengo es:

{} //el renderizado nunca ocurrió, lo que significa que FetchAPI nunca llamó a setComponentData() con su respuesta

Investigué más a fondo y parece que FetchAPI no realiza ninguna llamada en absoluto en esta tercera ocasión, ya que cuando reviso nuestro servidor, no hay solicitudes entrantes para ella después de las dos primeras (lo cual explicaría por qué el componente nunca se renderiza de nuevo; FetchAPI no recibe una respuesta y, por lo tanto, nunca llega a la .then() para llamar a setComponentData()).

Con eso, ¿por qué FetchAPI no realiza la llamada después de la segunda vez? Me resulta sorprendente que esto funcione las dos primeras veces, pero no después.

Cualquier ayuda sería muy apreciada, este error me ha estado volviendo loco durante unas semanas.

davy.ai

July 28, 2023 at 1:00 pm

Posible solución para que FetchAPI no realice una llamada después de la segunda vez

El problema aquí podría estar relacionado con el hecho de que el gancho useEffect solo se llama una vez, cuando el componente se monta por primera vez. Por lo tanto, la llamada fetch también se realiza solo una vez, a menos que alguna de las dependencias en el arreglo de dependencias (en este caso vacío) cambie.

Una forma de asegurarse de que la llamada a la API se realice cada vez que se renderice el componente podría ser agregar una clave al componente que cambie cada vez que se realiza una nueva solicitud. Esta clave podría derivarse de las props pasadas al componente u otro valor relevante.

Por ejemplo, podrías definir una variable fetchKey que se actualice cada vez que el componente necesite recuperar nuevos datos, por ejemplo:

const myPopup = forwardRef((props, ref) => {
  const [componentData, setComponentData] = useState({});
  const [fetchKey, setFetchKey] = useState(0);

  useEffect(() => {
    fetch(`myurl.com/getdata/${fetchKey}`)
        .then((response) => response.json())
        .then((data) => setComponentData(data));
  }, [fetchKey]);

  console.log(componentData);
  // ...
});

En este ejemplo, hemos agregado un nuevo estado llamado fetchKey que comienza en 0. Cada vez que necesitamos obtener nuevos datos, actualizamos fetchKey llamando a setFetchKey(prevKey => prevKey + 1).

Luego incluimos fetchKey como una dependencia en la llamada useEffect, lo que asegura que el efecto se ejecute cada vez que fetchKey cambie. Esto, a su vez, hace que se realice la llamada fetch cada vez que el componente se renderiza con un nuevo valor de fetchKey.

¡Espero que esto ayude!

Answer

davy.ai

July 28, 2023 at 1:00 pm
Posible solución para que FetchAPI no realice una llamada después de la segunda vez

El problema aquí podría estar relacionado con el hecho de que el gancho useEffect solo se llama una vez, cuando el componente se monta por primera vez. Por lo tanto, la llamada fetch también se realiza solo una vez, a menos que alguna de las dependencias en el arreglo de dependencias (en este caso vacío) cambie.

Una forma de asegurarse de que la llamada a la API se realice cada vez que se renderice el componente podría ser agregar una clave al componente que cambie cada vez que se realiza una nueva solicitud. Esta clave podría derivarse de las props pasadas al componente u otro valor relevante.

Por ejemplo, podrías definir una variable fetchKey que se actualice cada vez que el componente necesite recuperar nuevos datos, por ejemplo:
```
const myPopup = forwardRef((props, ref) => {
  const [componentData, setComponentData] = useState({});
  const [fetchKey, setFetchKey] = useState(0);

  useEffect(() => {
    fetch(`myurl.com/getdata/${fetchKey}`)
        .then((response) => response.json())
        .then((data) => setComponentData(data));
  }, [fetchKey]);

  console.log(componentData);
  // ...
});
```
En este ejemplo, hemos agregado un nuevo estado llamado fetchKey que comienza en 0. Cada vez que necesitamos obtener nuevos datos, actualizamos fetchKey llamando a setFetchKey(prevKey => prevKey + 1).

Luego incluimos fetchKey como una dependencia en la llamada useEffect, lo que asegura que el efecto se ejecute cada vez que fetchKey cambie. Esto, a su vez, hace que se realice la llamada fetch cada vez que el componente se renderiza con un nuevo valor de fetchKey.

¡Espero que esto ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

FetchAPI no hace una solicitud después de 2 llamadas.

Answer

davy.ai