React中如何根据课程选择联动更新教授下拉选单？

问题根源 #

1. 最初版本使用普通变量而非React状态管理selectedCourseID和relevantProfs，变量更新无法触发组件重渲染，导致教授下拉框无变化。
2. 即使改用useState后，教授下拉框使用forEach遍历生成选项——forEach仅执行遍历操作，无返回值，无法生成有效的React元素数组。

修正后的完整代码 #

import { Modal, Button, Form, Row, Col } from "react-bootstrap";
import { useState } from "react";

export default function CreateReview(props) {
  const [show, setShow] = useState(false);
  // 用React状态管理选中课程ID和关联教授列表
  const [selectedCourseID, setSelectedCourseID] = useState("");
  const [relevantProfs, setRelevantProfs] = useState([]);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const yearOptions = [];
  for (let i = 2020; i <= new Date().getFullYear(); i++) {
    yearOptions.push(
      <option key={i} value={i}>
        {i}
      </option>
    );
  }

  const handleCourseChange = (e) => {
    const courseID = e.target.value;
    setSelectedCourseID(courseID);
    // 筛选对应课程的教授并更新状态
    const matchedProfs = props.profData.filter(
      (prof) => prof.courseID === courseID
    );
    setRelevantProfs(matchedProfs.map((prof) => prof.professor));
  };

  function submitHandler(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    // 此处添加提交逻辑
  }

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Create a Review
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Create New Review</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form onSubmit={submitHandler}>
            <Form.Select
              placeholder="selectCourse"
              required={true}
              aria-label="Course Selection"
              onChange={handleCourseChange}
              value={selectedCourseID} // 绑定选中值到状态，实现受控组件
            >
              <option key="blankChoice" hidden value>
                Select a Course
              </option>
              {props.courseData.map((course) => (
                <option key={course.courseID} value={course.courseID}>
                  CIT {course.courseID}: {course.courseName}
                </option>
              ))}
            </Form.Select>
            <Row className="mt-3">
              <Col>
                <Form.Select
                  placeholder="selectSemester"
                  required={true}
                  aria-label="Semester Taken"
                >
                  <option key="blankChoice" hidden value>
                    Semester
                  </option>
                  <option>Fall</option>
                  <option>Spring</option>
                  <option>Summer</option>
                </Form.Select>
              </Col>
              <Col>
                <Form.Select
                  placeholder="selectYear"
                  required={true}
                  aria-label="Year Taken"
                >
                  <option key="blankChoice" hidden value>
                    Year
                  </option>
                  {yearOptions}
                </Form.Select>
              </Col>
            </Row>
            <br />
            <Form.Select
              placeholder="selectProf"
              required={true}
              aria-label="Professor Selection"
              disabled={!selectedCourseID} {/* 未选课程时禁用教授下拉 */}
            >
              <option key="blankChoice" hidden value>
                Select a Professor
              </option>
              {/* 用map遍历生成选项，map会返回有效的React元素数组 */}
              {relevantProfs.map((prof, index) => (
                <option key={index} value={prof}>
                  {prof}
                </option>
              ))}
            </Form.Select>

            <Form.Group className="mb-3 mt-3" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" />
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicCheckbox">
              <Form.Check type="checkbox" label="Check me out" />
            </Form.Group>
            <Button variant="primary" type="submit">
              Publish Review
            </Button>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  );
}

关键修改说明 #

• 改用useState管理selectedCourseID和relevantProfs，确保变量更新触发组件重渲染。
• 课程下拉框绑定value={selectedCourseID}，转为受控组件，保证选中状态与状态同步。
• 教授下拉框使用map遍历relevantProfs生成选项（forEach无返回值，无法渲染元素）。
• 添加disabled={!selectedCourseID}，未选择课程时禁用教授下拉，优化用户体验。
• 修正submitHandler，添加e.preventDefault()阻止表单默认提交行为。
• 替换普通按钮为React-Bootstrap的Button组件，保持样式统一。

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