Aquí, en la representación (dentro del retorno () del componente Rides), ride.distance no está definido, pero cuando se usa por segunda vezEfecto dentro de la función de mapa al imprimir cada viaje que tienen ride.distance algún valor y no está definido
¿El componente se procesa después de ejecutar el primer useEffect y el segundo useEffect se ejecuta más tarde o hay algún otro problema?
¿Cómo se logra eso, antes de que el segundo useEffect complete la ejecució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); console.log(json); } const fetchUser = async () => { const data = await fetch('https://assessment.api.vweb.app/user'); const json = await data.json(); console.log(json); setUser(json); } const makeNetworkCalls = async() => { await fetchRides(); await fetchUser(); } makeNetworkCalls().catch((e) => { console.log(e); }) }, []) useEffect(() => { const calculateDistance = async(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 updaterides = async() => { setUpdatedRides(rides); updatedRides.map(async(ride) => { ride.distance = await calculateDistance(ride.station_path, user.station_code); console.log(ride); }) } updaterides().catch((e) => { console.log(e); }) }, [rides]); 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;Arreglé tu código, échale un vistazo aquí https://codesandbox.io/embed/busy-payne-qiiw5r?fontsize=14&hidenavigation=1&theme=dark . El problema estaba relacionado con un comportamiento no async . En su segundo useEffect dentro de la función updaterides , está configurando updatedRides y luego lo está mapeando, pero no funciona como esperaba, ya que los cambios de state no se actualizan inmediatamente antes del map .
import { useEffect, useState } from "react"; 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(); setUpdatedRides(json); setRides(json); }; const fetchUser = async () => { const data = await fetch("https://assessment.api.vweb.app/user"); const json = await data.json(); setUser(json); }; const makeNetworkCalls = async () => { await fetchRides(); await fetchUser(); }; makeNetworkCalls().catch((e) => { console.log(e); }); }, []); useEffect(() => { const calculateDistance = async (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 updaterides = async () => { setUpdatedRides(rides); updatedRides.map(async (ride) => { ride.distance = await calculateDistance( ride.station_path, user.station_code ); console.log(ride); }); }; if (updatedRides?.length > 0 && rides?.length > 0) { updaterides().catch((e) => { console.log(e); }); } }, [rides, updatedRides]); return ( <div> <div className="rides"> {rides?.map((ride) => ( <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;