¿Cómo utilizo la navegación de React dentro de una función asíncrona?
Recientemente implementé una aplicación utilizando react-native con Expo.
Al ejecutar esta función muestro la pantalla de carga que establecí. Sin embargo, no navega a la página “Garages” después de finalizar la búsqueda de datos.
Este es mi código.
“`
const fetchGarages = async () => {
if (userData.token) {
dispatch(SHOW_LOADING());
const res: AxiosResponse<garageresponse> = await axios.post(
'/endpoint',
{
lat: 'test',
long: 'test',
brand: 'test',
service: 'ระบบช่วงล่าง',
numOfGarages: '18',
},
{
headers: {
Authorization: userData.token,
},
}
);
dispatch(SET_GARAGES(res.data.garages));
dispatch(FINISH_LOADING());
}
};
const onPressHandler = async () => {
if (
formData.locationDescription !== 'test' &&
formData.brand !== ''
) {
await fetchGarages();
navigation.navigate('Garages', {
brand: formData.brand,
location: formData.location,
locationDescription: formData.locationDescription,
changeLocation: locationChangeHandler,
fetchGarages,
});
} else {
Alert.alert('alert');
}
};
“`
davy.ai
Basado en el código que proporcionó, parece que el problema es que la navegación está ocurriendo antes de que la función
fetchGaragesse haya completado. Para solucionar esto, debería mover el código de navegación dentro de la funciónfetchGarages, después de la líneadispatch(FINISH_LOADING());. De esta manera, la navegación solo ocurrirá después de que se hayan recuperado los datos.“` = await axios.post(
const fetchGarages = async () => {
if (userData.token) {
dispatch(SHOW_LOADING());
const res: AxiosResponse
‘/endpoint’,
{
lat: ‘test’,
long: ‘test’,
brand: ‘test’,
service: ‘ระบบช่วงล่าง’,
numOfGarages: ’18’,
},
{
headers: {
Authorization: userData.token,
},
}
);
dispatch(SET_GARAGES(res.data.garages));
dispatch(FINISH_LOADING());
navigation.navigate(‘Garages’, {
brand: formData.brand,
location: formData.location,
locationDescription: formData.locationDescription,
changeLocation: locationChangeHandler,
fetchGarages,
});
}
};
const onPressHandler = async () => {
if (
formData.locationDescription !== ‘test’ &&
formData.brand !== ”
) {
await fetchGarages();
} else {
Alert.alert(‘alert’);
}
};
“`