RangeError: Maximum call stack size exceeded
On using multiple async/await i am getting error RangeError: Maximum call stack size exceeded
I think the stack size is fulled on calling so many async functions but if not so how do i achieve same functionality that this code would have achieved if it doesn't get any error
Code attached below:
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;
Your code is nice and legible, but even so, it's a little bit hard to tell what you're going for:
A major issue is that the function you define called "fetch" (side note: shadowing variable names is frowned upon), is not returning a variable or setting state (so it's not really doing anything).
Another issue is that updateRides in your fetch function will be stale (have the initial value, not the one set by fetchRides). That may mean you're looping over data in a different format (or at least different values) than you're expecting.
I think this might be a little closer (let me know if it's not and I can update):
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);
})
}, [])