使用react-hook-form时select组件值始终为undefined的排查求助

你的问题出在未通过react-hook-form官方方式初始化表单值，而是手动给DOM元素设置defaultValue，导致表单无法正确追踪select的选中状态。

核心问题点 #

react-hook-form依赖自身的状态管理系统同步表单值，手动给select/input设置defaultValue会绕过它的状态追踪逻辑，尤其是在使用依赖control实例的Form组件场景下，这种冲突会导致select的值无法被正确收集到提交payload中。

修复步骤 #

1. 将初始值配置到useForm的defaultValues参数中，移除DOM元素上的defaultValue属性
2. 确保Zod校验规则与初始值类型匹配

修复后的代码示例 #

import { Form, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

// 自定义Zod校验规则，需与初始值兼容
const zodSchema = z.object({
  selectTest: z.string(),
  inputTest: z.string(),
});

export const ExampleForm = () => {
    const initialValues = {
        selectTest: "Default select value",
        inputTest:  "Default input value"
    };

    const { register, control, getValues } = useForm({
        resolver: zodResolver(zodSchema),
        defaultValues: initialValues // 统一配置初始值
    });    

    return (
        <Form action="/api/endpoint" control={control}>
            <select {...register("selectTest")}>
                <option value="Default select value">Default</option>
                <option value="Another value">Another option</option>
            </select>

            <input 
                {...register("inputTest")}
                placeholder="Placeholder" />
        </Form>
    );
};

额外注意事项 #

• 如果初始值需根据外部依赖动态生成，仍可用useMemo包裹后传入defaultValues，但不要给DOM元素加defaultValue
• 检查Zod schema是否限制了select的可选值（如枚举），确保初始值在允许范围内，否则校验失败会导致值无法提交
• react-hook-form的Form组件会自动处理提交逻辑，不要额外添加阻止默认提交的代码

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