Estoy tratando de mostrar los datos de los estudiantes y los cursos en los que están inscritos desde una API simple que hice.
Aquí está el resultado de la API https://localhost:44309/api/Students
[ { "id": 1, "lastName": "Rizal", "firstName": "Jose", "courses": [ "C#", "Javascript", "CSS" ] }, { "id": 2, "lastName": "Bonifacio", "firstName": "Andres", "courses": [ "HTML", "ASP.NET MVC" ] }, { "id": 3, "lastName": "Sora", "firstName": "Tandang", "courses": [ "CSS", ".NET" ] } ]Aquí está mi código Javascript
import React from "react" import { useState, useEffect } from "react"; const StudentList = () => { const [students, setStudent] = useState([]); const getData = async () => { const response = await fetch("https://localhost:44309/api/students"); const data = await response.json() setStudent(data) } useEffect(() => { getData() }, []); return ( <div className="student-list"> <h2>Students and their courses</h2> {students.map(student => ( <div className="student-preview" key={student.id}> <p>{ student.fname } { student.lname }</p> <p>{ student.courses }</p> </div> ))} </div> ) } export default StudentList Recibo un error que dice Uncaught ReferenceError: students is not defined
Me pregunto qué estoy haciendo mal.
Algo está mal con su API, el código funciona bien con datos estáticos
import React from "react"; import { useState, useEffect } from "react"; const StudentList = () => { const [students, setStudent] = useState([ { id: 1, lastName: "Rizal", firstName: "Jose", courses: ["C#", "Javascript", "CSS"] }, { id: 2, lastName: "Bonifacio", firstName: "Andres", courses: ["HTML", "ASP.NET MVC"] }, { id: 3, lastName: "Sora", firstName: "Tandang", courses: ["CSS", ".NET"] } ]); return ( <div className="student-list"> <h2>Students and their courses</h2> {students.map((student) => ( <div className="student-preview" key={student.id}> <p> {student.fname} {student.lname} </p> <p>{student.courses}</p> </div> ))} </div> ); }; export default StudentList;