Tengo un problema, en las dos funciones a continuación, cuando verifico la depuración de mi solicitud, hay un ciclo infinito de mi solicitud GET y no entiendo por qué mi useEffect se vuelve a activar cada vez.
Aquí está mi código:
const gardenData = async () => { setLoading(true); const user = await AsyncStorage.getItem('user'); const parsedUserData = JSON.parse(user); try { const response = await axios.get( `http://127.0.0.1/api/garden?user=${parsedUserData.user.id}`, { headers: { Authorization: `Token ${parsedUserData.token}`, }, }, ); if (response.status === 200) { setGarden(response.data); setLoading(false); } } catch (e) { console.log('Erreur ' + e); setLoading(false); } }; const getPlotData = async () => { const user = await AsyncStorage.getItem('user'); const parsedUserData = JSON.parse(user); const id = garden.map(g => g.id); alert(id); try { const response = await axios.get( `http://127.0.0.1/api/plots?garden=${id}`, { headers: { Authorization: `Token ${parsedUserData.token}`, }, }, ); if (response.status === 200) { setPlot(response.data); } } catch (e) { alert(e); } }; useEffect(() => { gardenData(); getPlotData(); }, [setGarden, setPlot]);Gracias por la ayuda brindada
La matriz que pasa al segundo parámetro para useEffect debe contener las variables de estado para observar que, cuando se cambia, hará que useEffect se ejecute nuevamente, porque lo está pasando [setGarden, setPlot], cuando usa estos métodos para setPlot(response .data) luego useEffect se ejecuta de nuevo, provocando un bucle infinito
Si desea que esto se ejecute solo una vez, pase useEffect una matriz vacía como esta:
useEffect(() => { gardenData(); getPlotData(); }, []);Si setGarden y setPlot son el estado, creo que está observando dos vars que cambian en las funciones que llama. Simplemente coloque una matriz vacía en el observador de useEffect