He visto preguntas similares a esta, pero ninguna responde a mi pregunta. Para el código, es este.
const [raceData, updateRaceData] = useState(); const [raceChosen, updateRaceChosen] = useState(); const url = "http://localhost:5000/races/viewraces"; useEffect(() => { Axios.get(url) .then((response) => { const allRaces = response.data.races; updateRaceData(allRaces); }) .catch((error) => console.error(`Error: ${error}`)); }, []); console.log(raceData[0]);Entonces, cuando consola.log() raceData y raceData[0] o raceData 1 , funciona y no me causa ningún problema. Pero si, en cambio, hago console.log(raceData[0].race), y luego actualizo, comienza a decirme:
TypeError: no se pueden leer las propiedades de undefined (leyendo 'carrera')
Se agradecería cualquier ayuda para averiguar por qué tratar de acceder a las cosas desde la respuesta que recibo no funciona completamente.
Editar: aquí está la respuesta del objeto con raceData [ 1 ]: objeto de respuesta
El navegador ejecuta console.log(raceData[0]) antes de que se asigne la variable. Prueba raceData && console.log(raceData[0]); que solo ejecutará console.log() si se asigna raceData.
Intente mapear sobre los datos de carrera como tales:
raceData?.map((race) => console.log(race))
esto debería llenar su información raceData
