Estoy tratando de hacer mi primera aplicación React real y estoy extrayendo información de una base de datos, actualizando el estado para configurar esa información como una matriz y luego tratando de acceder a las propiedades de los objetos en la matriz.
function App() { const [students, setStudents] = useState([]); function fetchStudentInfo() { fetch('https://api.hatchways.io/assessment/students') .then(response => { return response.json(); }) .then(data => { const transformedStudentData = data.students.map(studentData => { return { imgURL: studentData.pic, fullName: `${studentData.firstName} ${studentData.lastName}`, email: studentData.email, company: studentData.company, skill: studentData.skill } }); setStudents(transformedStudentData); }); } fetchStudentInfo(); return ( <div> {console.log(students[0].fullName)} <h1>Student Assessments</h1> </div> ) } export default App;Sé que no debería estar consola. Registrando la información que estoy tratando de obtener, pero ni siquiera estoy seguro de cómo usar la consola en React para averiguar cómo acceder a mis variables. De todos modos, aparece "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'nombre completo')" como un error y falla. Realmente estoy tratando de transmitir la matriz como propiedades para usar en mis componentes, pero saqué el código para tratar de simplificar el problema por mí mismo y aquí es donde me topé con una pared.
En el primer renderizado, el estado de sus students es una matriz vacía porque así es como lo ha inicializado. En ese primer render, no puede acceder al primer índice (porque los datos no se han obtenido o el estado no se ha actualizado) y no puede acceder a una propiedad de un elemento que aún no existe.
Por lo tanto, necesita una condición allí que represente: 1) si la longitud de students.length es cero, devuelva un mensaje de carga (por ejemplo) 2) de lo contrario map la matriz de estudiantes que ahora sabe que existe para producir una lista de nombres de estudiantes.
Aquí hay un ejemplo de trabajo que usa useEffect para agregar una matriz al estado después de tres segundos simulando su API fetch . Debería usar useEffect como este para su fetch (con una matriz de dependencia vacía) en lugar de llamar a su función directamente en el componente.
const { useEffect, useState } = React; const json = '[{ "fullName": "Bob" },{ "fullName": "Karen" },{ "fullName": "Rick" }]'; function mockApi() { return new Promise((res, rej) => { setTimeout(() => res(json), 3000); }); } function Example({ data }) { const [ students, setStudents ] = useState([]); useEffect(() => { function getData() { mockApi() .then(json => JSON.parse(json)) .then(data => setStudents(data)); } getData(); }, []); // Initial log will be `[]` // Second log will be the updated state stringified useEffect(() => { console.log(JSON.stringify(students)); }, [students]); // No data, so return the loading message, or spinner if (!students.length) return <div>Loading: wait 3 seconds</div> // Data! `map` over it to produce the list return ( <ul> {students.map(student => { return <li>{student.fullName}</li>; })} </ul> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>