Javascript Employee对象有一个Department对象字段.如何使用Reaction将部门存储在员工中

我怎样才能发布员工？

也许我做错了什么？还有别的 Select 吗？我不知道你会有什么react .我只需要一个我的申请前台.这是我路上唯一的问题.

我确实为Employee使用了State，为Department使用了useState，但我不知道如何将Department嵌套在Employee中以用于将来的POST请求.

export default function AddEmployee() {

  // departments

  const [departments, setDepartments] = useState([]);

  useEffect(() => {
    loadDepartments();
  }, []);

  const loadDepartments = async () => {
    const result = await axios.get("http://localhost:8080/api/departments");
    setDepartments(result.data);
  };

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

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

  // employees

  const [employee, setEmployee] = useState({
    name: "",
    surname: "",
    age: "",
    phone: "",
    experience: "",
    department: {
      id: "",
      title: "",
      description: ""
    },
    salary: ""
  });

  const { name, surname, age, phone, experience, department, salary } = employee;

  const onInputChange = (event) => {
    setEmployee({ ...employee, [event.target.name]: event.target.value });
  };

  // all

  let navigate = useNavigate();

  const onSubmit = async (event) => {
    event.preventDefault();
    await axios.post("http://localhost:8080/api/employees", employee);
    navigate("/");
  };


  return (

    <div className='container mb-5'>
      <div className='row'>
        <div className='col-md-6 offset-md-3 border shadow p-4 mt-4'>
          <h2 className='text-center m-4 mb-5'>Add employee</h2>

          <form onSubmit={(event) => onSubmit(event)}>
            <div className="form-floating mb-3">
              <input
                type={"text"}
                className="form-control"
                id="name"
                placeholder="Enter name of employee"
                name='name'
                value={name}
                onChange={(event) => onInputChange(event)} />
              <label htmlFor="name">Name</label>
            </div>

            <div className="form-floating mb-3">
              <input
                type={"text"}
                className="form-control"
                id="surname"
                placeholder="Enter surname of employee"
                name='surname'
                value={surname}
                onChange={(event) => onInputChange(event)} />
              <label htmlFor="surname">Surname</label>
            </div>

            <div className="form-floating mb-3">
              <input
                type={"number"}
                className="form-control"
                id="age"
                placeholder="Enter age of employee"
                name='age'
                value={age}
                onChange={(event) => onInputChange(event)} />
              <label htmlFor="age">Age</label>
            </div>

            <div className="form-floating mb-3">
              <input
                type={"text"}
                className="form-control"
                id="phone"
                placeholder="Enter phone number of employee"
                name='phone'
                value={phone}
                onChange={(event) => onInputChange(event)} />
              <label htmlFor="phone">Phone number</label>
            </div>

            <div className="form-floating mb-3">
              <input
                type={"number"}
                className="form-control"
                id="experience"
                placeholder="Enter experience of employee"
                name='experience'
                value={experience}
                onChange={(event) => onInputChange(event)} />
              <label htmlFor="experience">Experience</label>
            </div>

            <div className="mb-3">
              <select
                className="form-select"
                aria-label="Department"
                name="id"
                onChange={(event) => onInputDepartmentChange(event)}>
                <option defaultValue>Department</option>
                {
                  departments.map((department, index) => (
                    <option key={index} value={department.id}>{department.title}</option>
                  ))
                }
              </select>
            </div>

            <div className="form-floating mb-3">
              <input
                type={"text"}
                className="form-control"
                id="salary"
                placeholder="Enter salary of employee"
                name='salary'
                value={salary}
                onChange={(event) => onInputChange(event)} />
              <label htmlFor="salary">Salary</label>
            </div>

            <button type='submit' className='btn btn-primary'>Submit</button>
            <Link className='btn btn-outline-danger mx-2' to="/">Cancel</Link>
          </form>

        </div>
      </div>
    </div>
  )
}