Explico mi problema: tengo dos funciones, una para crear un jardín y otra para una parcela. Entonces, son solicitudes POST a mi API, pero cuando hago clic en enviar, tengo otra función (que es una solicitud GET) que recupera el jardín y las parcelas, esta función funciona, pero tengo que volver a cargar la página para que aparezcan: no está agregado automáticamente. ¿Cómo puedo hacer esto?
Intenté poner en la matriz de useEffect (que repite mi función para recuperar datos del Jardín y las parcelas) la variable garden y plot o setGarden y setPlot pero no funciona.
Aquí está el código de la solicitud GET:
const [garden, setGarden] = useState([]); const [plot, setPlot] = useState([]); const [loading, setLoading] = useState(false); 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); 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 !
Supongo que el código mencionado es parte de un componente existente con retorno. Sería genial ver dónde ejecuta el método POST.
El gancho useEffect se activa solo en el montaje del componente (como se define con el segundo argumento - [] )
Por lo tanto, debe llamar a la función gardenData después de realizar con éxito la solicitud POST. Después de eso, los datos se actualizarán y el estado se encargará del resto.