Tengo un problema con mi código de reacción. Sigue diciendo que no puedo acceder a la propiedad "mapa", porque Object.values(...)[0] no está definido. esto generalmente significa que lo que sea que esté dentro de los valores de mi objeto es inalcanzable o no sale. Sin embargo lo hace. Solo necesito eliminar la imagen y las calificaciones de las personas para que funcione. A veces necesito actualizar la página varias veces y también funcionará.

alguien sabe porque esto puede estar pasando.

 import axios from 'axios' import { useState, useEffect } from 'react' import './App.css' function App() { const [students, setStudents] = useState([]) const hook = () => { axios .get('https://api.hatchways.io/assessment/students') .then(response => { console.log("promise filled") setStudents(response.data) }) } useEffect(hook, ([])) console.log((Object.values(students)[0])) const Person = ({ firstname, lastname, email, company, skill, grades , pic }) => { const temp = grades.reduce((a, b) => Number(a) + Number(b), 0) const average = temp / grades.length return <> <div> <img src={pic} /> <h1>{firstname} {lastname}</h1> <p>Email: {email}</p> <p>Company: {company}</p> <p>Skill: {skill}</p> <p>Average: {average}%</p> </div> </> } return ( <div class = "wrapper"> {((Object.values(students))[0]).map(person => <Person firstname={person.firstName} lastname={person.lastName} email={person.email} company={person.company} skill={person.skill} pic={person.pic} grades={person.grades} key={person.id} /> )} </div> ) } export default App;