顯示來自 API 的數據 undefined

Question

我正在嘗試通過我制作的簡單 API 顯示學生數據和他們注冊的課程。

這是 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"
    ]
  }
]

這是我的 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

我收到一條錯誤消息， Uncaught ReferenceError: students is not defined

我想知道我做錯了什么。

Answer 1

您的 api 有問題，該代碼適用於 static 數據

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;