React课程表代课教师替换功能失效问题求助

问题分析与修复方案 #

核心问题

你的课程表不更新是两个关键问题导致的：

1. 表单控件缺少name属性：你在handleSubmit里通过e.target.absentTeacher.value获取输入值，但输入框和下拉框只设置了id，没有对应的name属性，导致无法正确读取用户输入，替换逻辑根本没触发。
2. 初始数据字段值不匹配逻辑：你的timetable数组里，monday/tuesday等字段存的是科目（如Math、Science），但功能逻辑是替换缺勤教师的课程，输入教师姓名自然找不到匹配项，不会产生更新。

修复步骤

1. 给表单控件添加name属性

修改SubstituteForm.js的表单部分，添加对应name属性，同时把React里的for属性改为htmlFor（避免和JS关键字冲突）：

return (
  <form onSubmit={handleSubmit}>
    <label htmlFor="absent-teacher">缺勤教师:</label>
    <input type="text" id="absent-teacher" name="absentTeacher" />
    <br />
    <label htmlFor="substitute-teacher">代课教师:</label>
    <select id="substitute-teacher" name="substituteTeacher">
      <option value="Mrs. Smith">Mrs. Smith</option>
      <option value="Mr. Jones">Mr. Jones</option>
      <option value="Ms. Williams">Ms. Williams</option>
    </select>
    <br />
    <button type="submit">生成课程表</button>
  </form>
);

2. 调整初始数据（按需修改）

如果你的逻辑是科目对应固定教师，把timetable里的科目值替换为教师姓名，比如：

const [timetable, setTimetable] = useState([
  {
    time: "8:00 AM",
    monday: "Mrs. Smith",
    tuesday: "Mr. Jones",
    wednesday: "Ms. Williams",
    thursday: "Mrs. Smith",
    friday: "Mr. Jones",
  },
  // 其他时段同理修改
]);

3. 验证替换逻辑

修改后，handleSubmit能正确获取用户输入的教师姓名，遍历每个时段的字段完成替换，状态更新后Timetable组件会自动渲染新的课程表。

修复后的完整SubstituteForm.js

import React from "react";

const SubstituteForm = ({ timetable, setTimetable }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const absentTeacher = e.target.absentTeacher.value;
    const substituteTeacher = e.target.substituteTeacher.value;
    setTimetable(
      timetable.map((classPeriod) => {
        const updatedClassPeriod = { ...classPeriod };
        Object.keys(updatedClassPeriod).forEach((key) => {
          if (updatedClassPeriod[key] === absentTeacher) {
            updatedClassPeriod[key] = substituteTeacher;
          }
        });
        return updatedClassPeriod;
      })
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="absent-teacher">缺勤教师:</label>
      <input type="text" id="absent-teacher" name="absentTeacher" />
      <br />
      <label htmlFor="substitute-teacher">代课教师:</label>
      <select id="substitute-teacher" name="substituteTeacher">
        <option value="Mrs. Smith">Mrs. Smith</option>
        <option value="Mr. Jones">Mr. Jones</option>
        <option value="Ms. Williams">Ms. Williams</option>
      </select>
      <br />
      <button type="submit">生成课程表</button>
    </form>
  );
};

export default SubstituteForm;

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