NextJS 14中react-hook-form的onSubmit无响应问题求助

以下是针对该问题的核心排查方向和解决办法：

1. 校验规则拦截（最常见原因） #

react-hook-form默认仅在校验完全通过时才会触发onSubmit，先确认校验规则是否存在未满足的条件：

• 在表单组件中打印校验错误信息，确认是否有字段未通过校验：

  const { formState: { errors } } = useForm({ resolver: yupResolver(SignUpSchema) });
  console.log(errors); // 在控制台查看所有未通过校验的字段
  

• 检查SignUpSchema是否存在严格的必填项、格式规则（如邮箱正则、密码长度），且表单输入未满足这些规则。

2. 表单字段绑定错误 #

确保所有需要校验的输入字段都正确通过register或Controller完成绑定：

• 原生input必须通过register绑定name属性，不能手动写name却不调用register：

  // 正确写法
  <input {...register('email')} placeholder="邮箱" />
  // 错误写法（react-hook-form无法追踪字段值）
  <input name="email" placeholder="邮箱" />
  

• 如果使用UI库的自定义输入组件（如AntD Input），必须用Controller包裹，而非直接使用register：

  <Controller
    name="password"
    control={control}
    render={({ field }) => <Input.Password {...field} placeholder="密码" />}
  />
  

3. NextJS 14 客户端组件配置问题 #

在App Router模式下，react-hook-form必须在客户端组件中运行：

• 确认/sign-up页面顶部已添加客户端组件指令：

  'use client'; // 必须放在组件文件的最顶部
  import { useForm } from 'react-hook-form';
  // ...其他代码
  

如果页面是服务器组件，useForm会静默失效，直接导致onSubmit无法触发。

4. 提交按钮配置错误 #

检查提交按钮的类型和行为：

• 必须使用type="submit"的按钮，而非type="button"：

  // 正确写法（触发表单submit事件）
  <button type="submit">注册</button>
  // 错误写法（仅触发点击事件，不触发表单提交）
  <button type="button">注册</button>
  

• 确认按钮没有被错误禁用，或没有额外的e.preventDefault()阻止默认提交行为。

5. react-hook-form 初始化配置问题 #

检查useForm的初始化参数是否存在冲突：

• 确认mode配置是否为onSubmit（默认值），如果设置为onChange或onBlur，且字段校验未通过，会直接阻止提交：

  const { register, handleSubmit } = useForm({
    resolver: yupResolver(SignUpSchema),
    mode: 'onSubmit' // 保持默认或显式声明
  });
  

6. API路由辅助排查 #

如果以上前端排查都没问题，再确认API路由是否正常：

• 打开浏览器网络面板，触发提交时查看是否有POST请求发送到/api/(auth)/signup：
  • 如果没有请求，说明前端onSubmit确实未触发，回到前面的排查点；
  • 如果有请求但返回错误，再排查API路由的参数解析、权限配置等问题。

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