React中如何嵌套Department到Employee并完成员工POST请求？

核心问题 #

你当前的代码里，选择部门时更新的是独立的dep状态，但employee对象中的department字段并没有同步更新，导致POST请求时department还是初始的空对象，无法正确提交关联关系。

解决方案一：直接更新Employee中的Department字段（推荐） #

不需要单独维护dep状态，选择部门时直接从已加载的departments数组中获取完整部门信息，更新到employee的department字段里：

1. 删除以下冗余代码块：

const [dep, setDepartment] = useState({
  id: "",
  title: "",
  description: ""
});

const onInputDepartmentChange = (event) => {
  setDepartment({ ...dep, [event.target.name]: event.target.value });
};

2. 修改部门选择下拉框的onChange事件：

<div className="mb-3">
  <select
    className="form-select"
    aria-label="Department"
    onChange={(event) => {
      const selectedDeptId = event.target.value;
      // 从departments数组中匹配选中的部门对象
      const selectedDepartment = departments.find(dept => dept.id === selectedDeptId) || { id: "", title: "", description: "" };
      // 更新employee中的department字段
      setEmployee(prevEmployee => ({
        ...prevEmployee,
        department: selectedDepartment
      }));
    }}
  >
    <option value="">Select Department</option>
    {
      departments.map((department, index) => (
        <option key={index} value={department.id}>{department.title}</option>
      ))
    }
  </select>
</div>

这样选择部门后，employee.department会直接被设置为完整的部门对象，提交时就能正确包含部门信息。

解决方案二：提交时合并独立的Department状态 #

如果你想保留单独的dep状态，可以在提交前将其合并到employee对象中：

修改onSubmit函数：

const onSubmit = async (event) => {
  event.preventDefault();
  // 合并dep到employee的department字段
  const submitData = {
    ...employee,
    department: dep
  };
  await axios.post("http://localhost:8080/api/employees", submitData);
  navigate("/");
};

⚠️ 注意：这种方式下，你需要确保dep的所有字段（id、title、description）都被正确填充，否则后端可能无法识别。如果后端只需要部门ID，也可以简化为：

const submitData = {
  ...employee,
  department: { id: dep.id }
};

额外优化建议 #

• 下拉框的默认选项设置value=""，避免提交无效的默认值
• 保持employee初始department.id为空字符串，与其他字段的初始状态一致

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