Soy esencialmente nuevo en React, así que tengan paciencia conmigo si hay algún error extraño u obvio que me estoy perdiendo.
Estoy buscando crear un pequeño proyecto con la API de estadísticas de la Liga Nacional de Hockey y, lamentablemente, me encontré con un problema bastante pronto.
Esencialmente, lo que este código está tratando de hacer en este momento es obtener todas las ID del equipo actual a través de https://statsapi.web.nhl.com/api/v1/teams , y luego recorrer la respuesta de cada equipo y usar su único ID para almacenar cada ID de jugador que juega actualmente en la liga https://statsapi.web.nhl.com/api/v1/teams/ID/roster .
Las solicitudes de API parecen funcionar bien, sin embargo, me encuentro con un problema en el que la verificación de carga parece funcionar incorrectamente. Si digo, por ejemplo
{loading ? <p>Loading...</p> : <p>{playerList[0].jerseyNumber}</p>}Aparece el mensaje de error "No se pueden leer las propiedades de undefined".
¿Es incorrecta la forma en que intenté indicar la carga? ¿Hay una mejor manera de estar seguro de que las solicitudes de la API están completas al 100 % antes de acceder a los datos?
Aquí está mi código:
function App() { const [playerList, setPlayerList] = useState([]); const [loading, setLoading] = useState(true); useEffect (() => { fetch("https://statsapi.web.nhl.com/api/v1/teams") .then((teamsResponse) => teamsResponse.json()) .then((teamsData) => { const teams = teamsData.teams; teams.forEach((team) => { fetch("https://statsapi.web.nhl.com/api/v1/teams/" + team.id + "/roster") .then((teamResponse) => teamResponse.json()) .then((teamData) => { const roster = teamData.roster roster.forEach((player) => { setPlayerList((oldList) => [...oldList, player]); }); }); }); }); setLoading(false); }, []); return ( <div> {loading ? <p>Loading...</p> : playerList && <p>{playerList[0].jerseyNumber}</p>} </div> ); }Está llamando a setLoading(false) fuera de la llamada de fetch . Eso invocará la fetch y llamará a setLoading(false) sin esperar a que se resuelva la promesa.
Si desea que el indicador de carga se establezca en false solo después de todas las llamadas de fetch de lista, deberá usar Promise.all con un then . donde establece el indicador de carga en false , como:
const teams = teamsData.teams; const rosterRequests = teams.map(team => { fetch("https://statsapi.web.nhl.com/api/v1/teams/" + team.id + "/roster") .then(teamResponse => teamResponse.json()) .then(teamData => { // Update roster state }); // This will be executed once all the team roster requests have completed Promise.all(rosterRequests).then(() => setLoading(false));Puedes leer más sobre Promise.all aquí .
Está configurando la loading en falso antes de que se carguen los datos. Intente poner setLoading(false); dentro
.then((teamData) => { const roster = teamData.roster roster.forEach((player) => { setPlayerList((oldList) => [...oldList, player]); }); setLoading(false); <--- });setLoading debe establecerse en falso cuando se liquidan todas las promesas, ya que hay solicitudes anidadas, actualicé y probé la solución
useEffect(() => { fetch("https://statsapi.web.nhl.com/api/v1/teams") .then((teamsResponse) => teamsResponse.json()) .then((teamsData) => { const teams = teamsData.teams; let arr = []; const allRosterData = teams.map(async (team) => { const rosterData = await fetch( "https://statsapi.web.nhl.com/api/v1/teams/" + team.id + "/roster" ) .then((teamResponse) => teamResponse.json()) .then((teamData) => { const dt = []; const roster = teamData.roster; roster.forEach((player) => { dt.push(player); }); return dt; }); arr = [...arr, ...rosterData]; return rosterData; }); Promise.all(allRosterData) .then(() => { //Change state here when all promises are settled setPlayerList(arr); setLoading(false); }) .catch((err) => { console.error(err); }); }); }, []);