Next.js中React-Hook-Form结合Server Action仅remark字段传值异常

• 检查react-hook-form字段注册一致性
  确保所有需要传值的字段都通过register方法绑定，且name属性与Zod Schema的键完全匹配（大小写、拼写一致）。示例：

  // 正确写法
  <Input {...register("itService")} placeholder="IT服务" />
  // 错误：name拼写错误或未用register绑定
  <Input name="itservice" placeholder="IT服务" />
  

  不要手动覆盖value或onChange，除非使用Controller组件处理受控组件。

• 适配shadcn-ui受控组件
  对于shadcn-ui的Select、RadioGroup等受控组件，必须用Controller包裹才能正确收集数据，示例：

  <Controller
    name="softwareProductVersionName"
    control={control}
    render={({ field }) => (
      <Select {...field}>
        <SelectTrigger>
          <SelectValue placeholder="选择版本" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="v1.0">v1.0</SelectItem>
          <SelectItem value="v2.0">v2.0</SelectItem>
        </SelectContent>
      </Select>
    )}
  />
  

• 验证Zod Schema完整性
  确认Schema包含所有需要传递的字段，必填字段标记min(1)，可选字段标记optional()，示例：

  import { z } from "zod";
  
  const formSchema = z.object({
    itService: z.string().min(1, "IT服务为必填项"),
    softwareProductVersionName: z.string().min(1, "版本为必填项"),
    remark: z.string().optional(),
  });
  

  若Schema遗漏字段，react-hook-form会自动过滤未定义的字段。

• 确认表单提交逻辑
  提交时必须使用handleSubmit获取完整的表单数据，不要手动构造提交对象：

  const { register, control, handleSubmit } = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });
  
  const onSubmit = handleSubmit(async (formData) => {
    console.log(formData); // 先确认控制台输出是否包含所有字段
    await updateDatabase(formData); // 调用Server Action
  });
  

• 检查Server Action参数匹配
  Server Action的参数类型要与前端传递的表单数据结构一致，避免用原生FormData接收（除非手动解析）：

  // Server Action文件
  import { z } from "zod";
  import { formSchema } from "@/app/components/your-form-component";
  
  export async function updateDatabase(formData: z.infer<typeof formSchema>) {
    // 数据库更新逻辑
    console.log("接收的表单数据：", formData);
  }
  

• 排查字段状态

  • 若字段设置了disabled，react-hook-form默认不收集该字段，如需收集需在register中配置：{...register("fieldName", { disabled: false })}
  • 确认所有字段在提交时已挂载（无条件渲染导致的隐藏或未加载），未挂载的组件无法被注册。

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