React使用Hook Form动态填充Select组件，提交时选中值未同步问题

你遇到的问题大概率是没有正确将动态Select组件与Hook Form的字段注册逻辑绑定，尤其是使用第三方UI组件（如AntD、MUI Select）时，直接用register往往不生效——这类组件属于受控组件，需要用Hook Form的Controller来接管。以下分两种场景给出解决方案：

场景1：原生HTML Select组件 #

如果用的是原生<select>，只需确保正确调用register并匹配字段名，同时动态加载的选项value与提交字段对应：

import { useForm } from "react-hook-form";
import { useState, useEffect } from "react";

export default function DepartmentForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    defaultValues: { department: "" } // 初始化字段，避免提交时字段不存在
  });
  const [departments, setDepartments] = useState([]);

  // 从服务器拉取部门数据
  useEffect(() => {
    async function fetchDepartments() {
      try {
        const res = await fetch("/api/departments");
        const data = await res.json();
        setDepartments(data);
      } catch (err) {
        console.error("获取部门数据失败:", err);
      }
    }
    fetchDepartments();
  }, []);

  const onSubmit = (data) => {
    console.log("提交数据:", data); // 此时能看到department字段
    // 这里做提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>选择部门:</label>
        <select {...register("department", { required: "请选择部门" })}>
          <option value="">请选择</option>
          {departments.map(dept => (
            <option key={dept.id} value={dept.id}>
              {dept.name}
            </option>
          ))}
        </select>
        {errors.department && <span style={{ color: "red" }}>{errors.department.message}</span>}
      </div>
      <button type="submit">提交表单</button>
    </form>
  );
}

场景2：第三方UI组件（如AntD Select） #

第三方Select组件属于受控组件，Hook Form无法通过register直接接管，必须用Controller组件包裹，手动绑定value和onChange：

import { useForm, Controller } from "react-hook-form";
import { useState, useEffect } from "react";
import { Select, Button, Form } from "antd";

const { Option } = Select;

export default function DepartmentForm() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: { department: "" }
  });
  const [departments, setDepartments] = useState([]);

  useEffect(() => {
    async function fetchDepartments() {
      try {
        const res = await fetch("/api/departments");
        const data = await res.json();
        setDepartments(data);
      } catch (err) {
        console.error("获取部门数据失败:", err);
      }
    }
    fetchDepartments();
  }, []);

  const onSubmit = (data) => {
    console.log("提交数据:", data);
    // 提交逻辑
  };

  return (
    <Form onFinish={handleSubmit(onSubmit)} layout="vertical">
      <Form.Item label="选择部门">
        <Controller
          name="department"
          control={control}
          rules={{ required: "请选择部门" }}
          render={({ field: { onChange, value } }) => (
            <Select
              value={value}
              onChange={onChange}
              placeholder="请选择部门"
              style={{ width: 200 }}
            >
              {departments.map(dept => (
                <Option key={dept.id} value={dept.id}>
                  {dept.name}
                </Option>
              ))}
            </Select>
          )}
        />
        {errors.department && <span style={{ color: "red" }}>{errors.department.message}</span>}
      </Form.Item>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
  );
}

关键注意点 #

1. 初始化默认值：在useForm中设置defaultValues，确保提交时字段不会因为未初始化而缺失
2. 选项值匹配：动态加载的部门选项value要与提交时期望的字段类型一致（比如用ID字符串/数字，不要用对象）
3. 受控组件必须用Controller：所有第三方UI库的表单组件（如Select、DatePicker等）都需要用Controller包裹，Hook Form才能正确追踪其值变化

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