Tengo 2 funciones que quiero ejecutar una después de la otra, pero como la segunda función obtiene información del estado creado en la función anterior, quiero que espere a que termine antes de ejecutarse.
Sé que async/await es probablemente lo mejor para esto, pero aún no lo he entendido por completo.
La primera función esencialmente toma la ubicación más cercana de un conjunto de datos y establece el estado del primer elemento de esos datos, luego la segunda función moverá el mapa a esa ubicación desde la latitud/longitud de la función anterior.
Este es mi código actualmente:
const nearestPod = () => { let newArr = []; let closest = []; data.map(item => newArr.push(item.distance)); newArr.sort(function (a, b) { return a - b; }); data.map(item => item.distance == newArr[0] && closest.push(item)); setClosestPod(closest); setNearestActive(true); moveToNearestPod(); }; const moveToNearestPod = async () => { await nearestPod(); let lat = closestPod[0].lat; let lng = closestPod[0].lng; setLat(lat); setLng(lng); };Esta función funciona, pero solo en el segundo clic y me lanza advertencias de Rechazo de Promesa, así que siento que estoy cerca de hacerlo bien, pero si alguien pudiera proporcionar algo de experiencia para conocer las mejores prácticas para seguir adelante, ¡lo agradecería mucho!
Gracias por adelantado.
Nada de esto necesita async . Pero React pone en cola y procesa las actualizaciones de estado en lotes, por lo que debe usar useEffect para recoger los cambios en esos cambios de estado y luego establecer sus estados de latitud/longitud.
Nota: el map crea una nueva matriz, por lo que no necesita declarar sus matrices de antemano (de lo contrario, use forEach ). Y, ese segundo ejemplo probablemente debería usar find . Devolverá un objeto que coincida con la condición.
function nearestPod() { const newArr = data.map(item => item.distance); newArr.sort((a, b) => a - b); const closest = data.find(item => item.distance === newArr[0]); setClosestPod(closest); setNearestActive(true); }; useEffect(() => { let lat = closestPod.lat; let lng = closestPod.lng; setLat(lat); setLng(lng); }, [closestPod]);