React表单提交时console.log先输出undefined再出正确值问题

核心原因：重复触发表单提交事件 #

你遇到的onSubmit被调用两次、首次data为undefined的问题，大概率是重复绑定了表单提交触发逻辑，常见场景如下：

• 同时在<form>标签的onSubmit属性和提交按钮的onClick事件中绑定了handleSubmit(onSubmit)
• 提交按钮未显式指定类型，且额外绑定了点击事件，导致默认的表单提交+手动调用提交逻辑，触发两次执行

首次调用时data为undefined，是因为直接通过按钮onClick调用handleSubmit(onSubmit)时，没有经过react-hook-form的表单数据收集与验证流程，自然无法获取到表单值。

修复步骤 #

1. 移除重复的提交绑定

只保留<form>标签上的onSubmit绑定，去掉提交按钮的onClick事件：

错误代码示例：

// 错误：同时绑定form的onSubmit和按钮的onClick
<form onSubmit={handleSubmit(onSubmit)}>
  <button onClick={handleSubmit(onSubmit)}>提交</button>
</form>

正确代码示例：

import { useForm } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
    // 安全处理FormData
    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => {
      formData.append(key, value);
    });
    // 后续业务逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="用户名" />
      <input {...register("email")} type="email" placeholder="邮箱" />
      {/* 无需onClick，按钮默认type为submit，点击自动触发form的onSubmit */}
      <button type="submit">提交</button>
    </form>
  );
}

2. 排查其他可能触发重复提交的情况

• 检查组件是否被父组件重复渲染（比如在循环中、条件渲染逻辑错误导致多次挂载）
• 确认页面中没有多个嵌套的<form>标签，避免触发多层提交事件
• 开发环境下的React严格模式（StrictMode）会导致组件渲染两次，但不会触发两次提交事件，可忽略此因素

额外提示 #

如果需要在提交前做额外处理（比如确认弹窗），不要直接调用handleSubmit(onSubmit)，而是在按钮的onClick中先处理逻辑，再手动触发表单提交：

<form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
  <button type="button" onClick={() => {
    if (window.confirm("确定提交吗？")) {
      formRef.current?.submit();
    }
  }}>提交</button>
</form>

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