如何利用下拉选框值从API中展示对应学期的课程表数据？

AI 小北

2026-8-11

问题

我的API存储了从Fall16到Fall23共12个学期的课程表数据，当前代码会展示所有学期的总课程表。我已经做了下拉选框让用户选学期，想实现选对应学期（比如FALL22）时只显示该学期的数据。API里用数字SemesterID代表学期：1对应Fall16，12对应Fall22。以下是我的React代码：

import './Home.css';
import {React, useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import {getMasterSchedule} from "./SharedService";

const columns = [{field: "CRN", headerName: "CRN", width: 100},
                 {field: "CourseID", headerName: "Course ID", width: 90},
                 {field: "SectionNumber", headerName: "Section", width: 80},
                 {field: "CourseName", headerName: "Course Name", width: 300},
                 {field: "FirstName", headerName: "Professor", width: 85},
                 {field: "BuildingName", headerName: "Building", width: 150},
                 {field: "RoomNumber", headerName: "Room", width: 80},
                 {field: "SeatsAvailable", headerName: "Seats Available", width: 100},
                 {field: "StartTime", headerName: "Start Time", width: 100},
                 {field: "EndTime", headerName: "End Time", width: 100},
                 {field: "WeekDay", headerName: "Day", width: 100},
                 {field: "SemesterID", headerName: "SemesterID", width: 100}];

function MasterSchedule() {
  const [tableData, setTableData] = useState([])

  getMasterSchedule().then(x => {
    setTableData(x.data)
    }
  );

  const [semester, setSemester] = useState();
  return (
    <>
  
  <br></br>
  <br></br>
  <br></br>
  <br></br>
  <br></br>
  <h1>MASTER SCHEDULE - {semester}</h1>

  <div>
    <h3>Select Semester</h3>
      <select id="semester" value={semester} 
              onChange={(e) => setSemester(e.target.value)}>
              <option value="">--</option>
              <option value="FALL23">FALL23</option>
              <option value ="SPRING23">SPRING23</option> 
              <option value ="FALL22">FALL22</option>
              <option value ="SPRING22">SPRING22</option>
              <option value ="FALL21">FALL21</option>
              <option value ="SPRING21">SPRING21</option>
              <option value ="FALL20">FALL20</option>
              <option value ="SPRING20">SPRING20</option>
              <option value ="FALL19">FALL19</option>
              <option value ="SPRING19">SPRING19</option>
              <option value ="FALL18">FALL18</option>
              <option value ="SPRING18">SPRING18</option>
      </select>
      
    </div>


      <div style={{ height: 650, width: '100%' }}>
      <Box sx={{ height: 400, width: 1 }}>
        <DataGrid
          rows={tableData}
          columns={columns}
          pageSize={10}
          rowsPerPageOptions={[10]}
          getRowId={(row) => row.CRN}

          disableColumnFilter
          disableColumnSelector
          disableDensitySelector
          disableColumnMenu
          components={{ Toolbar: GridToolbar }}
          componentsProps={{
            toolbar: {
              showQuickFilter: true,
              quickFilterProps: { debounceMs: 500 },
            },
          }}
        />
        </Box>
      </div>
      

  
</>

  );
}

export default MasterSchedule;

解决方案

按以下步骤修改代码即可实现筛选功能：

1. 新增学期名称与SemesterID的映射

先定义一个映射对象，把下拉框里的学期名称对应到API的数字ID，方便后续筛选：

const semesterIdMap = {
  "FALL16": 1,
  "SPRING17": 2,
  "FALL17": 3,
  "SPRING18": 4,
  "FALL18": 5,
  "SPRING19": 6,
  "FALL19": 7,
  "SPRING20": 8,
  "FALL20": 9,
  "SPRING21": 10,
  "FALL21": 11,
  "SPRING22": 12,
  "FALL22": 13, // 这里根据你的实际对应关系调整，你说12对应FALL22的话就改成12
  "SPRING23": 14,
  "FALL23": 15
};

2. 实现数据过滤逻辑

通过计算属性生成过滤后的行数据：

如果用户没选学期（semester为空），展示所有数据
如果选中了学期，只保留SemesterID匹配映射值的行

3. 优化API请求逻辑

把API请求放到useEffect里，避免组件重复渲染时重复请求数据。

修改后的完整代码

import './Home.css';
import { React, useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { getMasterSchedule } from "./SharedService";

// 学期名称与API SemesterID的映射
const semesterIdMap = {
  "FALL16": 1,
  "SPRING17": 2,
  "FALL17": 3,
  "SPRING18": 4,
  "FALL18": 5,
  "SPRING19": 6,
  "FALL19": 7,
  "SPRING20": 8,
  "FALL20": 9,
  "SPRING21": 10,
  "FALL21": 11,
  "SPRING22": 12,
  "FALL22": 13, // 按实际对应关系调整，比如你说12对应FALL22就改成12
  "SPRING23": 14,
  "FALL23": 15
};

const columns = [
  { field: "CRN", headerName: "CRN", width: 100 },
  { field: "CourseID", headerName: "Course ID", width: 90 },
  { field: "SectionNumber", headerName: "Section", width: 80 },
  { field: "CourseName", headerName: "Course Name", width: 300 },
  { field: "FirstName", headerName: "Professor", width: 85 },
  { field: "BuildingName", headerName: "Building", width: 150 },
  { field: "RoomNumber", headerName: "Room", width: 80 },
  { field: "SeatsAvailable", headerName: "Seats Available", width: 100 },
  { field: "StartTime", headerName: "Start Time", width: 100 },
  { field: "EndTime", headerName: "End Time", width: 100 },
  { field: "WeekDay", headerName: "Day", width: 100 },
  { field: "SemesterID", headerName: "SemesterID", width: 100 }
];

function MasterSchedule() {
  const [tableData, setTableData] = useState([]);
  const [semester, setSemester] = useState("");

  // 仅在组件挂载时请求一次数据
  useEffect(() => {
    getMasterSchedule().then(x => {
      setTableData(x.data);
    });
  }, []);

  // 生成过滤后的行数据
  const filteredRows = semester 
    ? tableData.filter(row => row.SemesterID === semesterIdMap[semester])
    : tableData;

  return (
    <>
      <br /><br /><br /><br /><br />
      <h1>MASTER SCHEDULE - {semester || "ALL"}</h1>

      <div>
        <h3>Select Semester</h3>
        <select 
          id="semester" 
          value={semester} 
          onChange={(e) => setSemester(e.target.value)}
        >
          <option value="">-- 全部学期 --</option>
          <option value="FALL23">FALL23</option>
          <option value="SPRING23">SPRING23</option> 
          <option value="FALL22">FALL22</option>
          <option value="SPRING22">SPRING22</option>
          <option value="FALL21">FALL21</option>
          <option value="SPRING21">SPRING21</option>
          <option value="FALL20">FALL20</option>
          <option value="SPRING20">SPRING20</option>
          <option value="FALL19">FALL19</option>
          <option value="SPRING19">SPRING19</option>
          <option value="FALL18">FALL18</option>
          <option value="SPRING18">SPRING18</option>
          <option value="FALL17">FALL17</option>
          <option value="SPRING17">SPRING17</option>
          <option value="FALL16">FALL16</option>
        </select>
      </div>

      <div style={{ height: 650, width: '100%' }}>
        <Box sx={{ height: 400, width: 1 }}>
          <DataGrid
            rows={filteredRows}
            columns={columns}
            pageSize={10}
            rowsPerPageOptions={[10]}
            getRowId={(row) => row.CRN}
            disableColumnFilter
            disableColumnSelector
            disableDensitySelector
            disableColumnMenu
            components={{ Toolbar: GridToolbar }}
            componentsProps={{
              toolbar: {
                showQuickFilter: true,
                quickFilterProps: { debounceMs: 500 },
              },
            }}
          />
        </Box>
      </div>
    </>
  );
}

export default MasterSchedule;

额外优化点

给默认选项添加了-- 全部学期 --的文字，更清晰
标题在未选学期时显示ALL，代替原来的空白
补充了Fall16和Spring17的下拉选项，覆盖你提到的所有12个学期

内容的提问来源于stack exchange，提问作者Patrox

如何利用下拉选框值从API中展示对应学期的课程表数据？

解决方案 #

1. 新增学期名称与SemesterID的映射 #

2. 实现数据过滤逻辑 #

3. 优化API请求逻辑 #

修改后的完整代码 #