RangeError: se excedió el tamaño máximo de la pila de llamadas
Al usar múltiples async/await, aparece el error RangeError: se excedió el tamaño máximo de la pila de llamadas
Creo que el tamaño de la pila se llena al llamar a tantas funciones asíncronas, pero si no es así, ¿cómo logro la misma funcionalidad que este código habría logrado si no recibe ningún error?
Código adjunto a continuación:
import Navbar from "./Navbar"; const Rides = () => { const [rides, setRides] = useState([]); const [user, setUser] = useState({}); const [updatedRides, setUpdatedRides] = useState([]); useEffect(() => { const fetchRides = async () => { const data = await fetch('https://assessment.api.vweb.app/rides'); const json = await data.json(); setRides(json); setUpdatedRides(json); } const fetchUser = async () => { const data = await fetch('https://assessment.api.vweb.app/user'); const json = await data.json(); setUser(json); } const calculateDistance = (path, user_station) => { let min = Math.abs(user_station - path[0]); for(let i = 0; i<path.length; i++){ if(path[i] === user_station){ return 0; } if(Math.abs(path[i] - user_station) < min){ min = Math.abs(path[i] - user_station); } } return min; } const fetch = async() => { await fetchRides(); await fetchUser(); updatedRides.map((ride) => { ride.distance = calculateDistance(ride.station_path, user.station_code); }) } fetch().catch((e) => { console.log(e); }) }, []) return( <div> <Navbar user = {user}/> <div className="rides"> {updatedRides.map((ride) => { return ( <div className="rideDetail"> <img src = {ride.map_url} alt="Ride_map" /> <div> <p>Ride Id : {ride.id}</p> <p>Origin Station : {ride.origin_station_code}</p> <p>Station Path : {ride.station_path}</p> <p>Date : {ride.date}</p> <p>Distance : {ride.distance}</p> </div> </div> ) })} </div> </div> ) } export default Rides;Su código es agradable y legible, pero aun así, es un poco difícil saber a qué se dirige:
Un problema importante es que la función que define llamada "buscar" (nota al margen: los nombres de variables sombreados están mal vistos), no devuelve una variable o un estado de configuración (por lo que en realidad no está haciendo nada).
Otro problema es que updateRides en su función de fetch estará obsoleto (tendrá el valor inicial, no el establecido por fetchRides ). Eso puede significar que está recorriendo datos en un formato diferente (o al menos en valores diferentes) de lo que esperaba.
Creo que esto podría estar un poco más cerca (avísame si no es así y puedo actualizar):
const Rides = () => { const [rides, setRides] = useState([]); const [user, setUser] = useState({}); useEffect(() => { const fetchRides = async () => { const data = await fetch('https://assessment.api.vweb.app/rides'); const json = await data.json(); return json; } const fetchUser = async () => { const data = await fetch('https://assessment.api.vweb.app/user'); const json = await data.json(); setUser(json); } const calculateDistance = (path, user_station) => { let min = Math.abs(user_station - path[0]); for(let i = 0; i<path.length; i++){ if(path[i] === user_station){ return 0; } if(Math.abs(path[i] - user_station) < min){ min = Math.abs(path[i] - user_station); } } return min; } const makeNetworkCalls = async() => { const rides = await fetchRides(); await fetchUser(); setRides(updatedRides.map((ride) => { ride.distance = calculateDistance(ride.station_path, user.station_code); })) } makeNetworkCalls().catch((e) => { console.log(e); }) }, [])