Cuando creo un elemento y hago clic en guardar, me gustaría que cuando regrese a la página se actualice automáticamente con lo que acabo de crear. Para que mi useEffect detecte los cambios que acaban de llegar al nivel de la solicitud GET.
Pero probé de todo, traté de poner la variable garden en el arreglo de useEffect pero hace un loop infinito de solicitud GET, también traté de poner setGarden no hace un loop infinito pero no se actualiza automáticamente, tengo que recargar la pagina...
Aquí está el código:
const [garden, setGarden] = useState([]); const [plot, setPlot] = useState([]); const [loading, setLoading] = useState(false); const navigation = useNavigation(); 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) { navigation.navigate('LogScreen'); setGarden(response.data); setLoading(false); try { const plotResponse = await axios.get( `http://127.0.0.1/api/plots?garden=${response.data[0].id}`, { headers: { Authorization: `Token ${parsedUserData.token}`, }, }, ); if (plotResponse.status === 200) { setPlot(plotResponse.data); } } catch (e) { alert(e); } } } catch (e) { console.log('Erreur ' + e); setLoading(false); } }; useEffect(() => { gardenData(); }, []);Gracias por la ayuda !
Simplemente puede usar una indicación para asegurarse de que la función gardenData se haya ejecutado una vez. Puede inicializar uno de su estado o incluso puede usar un estado completamente nuevo. Esto solo ejecuta el código una vez.
const [garden, setGarden] = useState([]); const [plot, setPlot] = useState([]); const [loading, setLoading] = useState(false); const [FirstRun, setFirstRun] = useState(true); const navigation = useNavigation(); const gardenData = async () => { if(!FirstRun) return; setFirstRun(false); 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) { navigation.navigate('LogScreen'); setGarden(response.data); setLoading(false); try { const plotResponse = await axios.get( `http://127.0.0.1/api/plots?garden=${response.data[0].id}`, { headers: { Authorization: `Token ${parsedUserData.token}`, }, }, ); if (plotResponse.status === 200) { setPlot(plotResponse.data); } } catch (e) { alert(e); } } } catch (e) { console.log('Erreur ' + e); setLoading(false); } }; useEffect(() => { if(FirstRun) { gardenData(); } // your code here }, [garden]);