0
202
VistasLa solicitud de obtención de useEffect está extrayendo datos dos veces
Lo que quiero:
Extraigo datos de una api y luego configuro los datos en state . Hice esto dentro de un gancho useEffect , pero cuando consola.log los datos después, muestra los datos dos veces, a veces 4 veces. No sé por qué sucede esto.
Lo que he probado:
-
console.logdentro de useEffect para ver los datos de la fuente - deshabilitar las herramientas de desarrollo de reacción dentro de Chrome.
Mi código:
// make api call, assign response to data state const [apiData, setApiData] = useState(); useEffect(() => { async function fetchData() { try { await fetch('https://restcountries.com/v3.1/all') .then(response => response.json()) .then(data => setApiData(data)); } catch (e) { console.error('Error fetching api data', e); }; }; fetchData(); }, []); console.log(apiData); Resultado de console.log :
2 Respuestas
Responde la pregunta0
Si está utilizando React versión 18+, StrictMode tiene un cambio de comportamiento. Antes no estaba ejecutando los efectos dos veces, ahora lo hace para comprobar si hay errores. (En realidad, monta y vuelve a montar, lo que hace que los efectos de renderizado iniciales se disparen dos veces)
https://reactjs.org/blog/2022/03/29/react-v18.html#nuevos-comportamientos-en-modo-estricto
0
Como se mencionó en el otro comentario, esto se debe a que los efectos se "invocan doblemente" en modo estricto.
Una solución común y que creo que ha sido sugerida por el equipo de React (aunque estoy luchando por encontrar dónde leí esto) es usar useRef .
// make api call, assign response to data state const [apiData, setApiData] = useState(); const hasFetchedData = useRef(false); useEffect(() => { async function fetchData() { try { await fetch('https://restcountries.com/v3.1/all') .then(response => response.json()) .then(data => setApiData(data)); } catch (e) { console.error('Error fetching api data', e); }; }; if (hasFetchedData.current === false) { fetchData(); hasFetchedData.current = true; } }, []);