React Hook Form onSubmit 数据未正确传递的解决方案-js教程-PHP中文网

React Hook Form onSubmit 数据未正确传递的解决方案

本文详解 React Hook Form 中 handleSubmit 无法正确传递表单数据的问题，指出常见错误在于 onSubmit 回调嵌套方式不当，并提供标准用法、代码修复示例及关键注意事项。

本文详解 react hook form 中 handlesubmit 无法正确传递表单数据的问题，指出常见错误在于 `onsubmit` 回调嵌套方式不当，并提供标准用法、代码修复示例及关键注意事项。

在使用 React Hook Form 时，一个高频误区是误以为 handleSubmit(onSubmit) 的返回值会自动将表单数据注入到外部传入的 onSubmit 函数中——实际上，handleSubmit 是一个高阶函数，它接收一个以表单数据为参数的回调函数，并在表单验证通过后调用该回调，并传入解析后的 data 对象。

你当前的写法：

看似正确，但存在根本性问题：handleSubmit(onSubmit) 在组件渲染时即被立即执行（而非在表单提交时），且 onSubmit 接收的是原生 SubmitEvent，而非 data 对象。这是因为 handleSubmit 的返回值是一个事件处理器函数，而你直接将其作为 onSubmit 的参数传入，导致 onSubmit 被当作事件处理函数调用，而非数据处理函数。

✅ 正确做法是：将 handleSubmit 包裹一个箭头函数，显式接收 data 并透传给你的业务逻辑函数：

onSubmit(data))}>

或者更简洁地（推荐）：

⚠️ 注意：这仅在 onSubmit 函数签名明确接收 data: Record 类型参数时才成立——也就是说，你的 handleConfirmAddScreen 必须设计为接收表单数据对象，而非事件对象。

因此，请确保 AddScreen 组件中的 onSubmit 调用方式与 Managerole 中定义的 handleConfirmAddScreen 函数签名一致：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

// ✅ 正确：handleConfirmAddScreen 接收 data 对象
const handleConfirmAddScreen = (data) => {
  console.log("Form data:", data); // { screenName: "dashboard" }
  // ✅ 可安全访问 data.screenName
};

// ❌ 错误：若写成 handleConfirmAddScreen = (e) => { ... }，则 e 是 SyntheticEvent

此外，还需注意以下几点：

移除 value 和 watch 的手动绑定：你在中写了 value={watch("screenName")}，这会破坏 React Hook Form 的受控机制。register 已自动处理受控状态，应删除 value 属性，改用 defaultValue（初始值）或完全交由 RHF 管理。
确保 useForm 配置合理：mode: "onChange" 是可选的，但若表单字段较多，建议使用 "onSubmit"（默认）以提升性能；如需实时校验，再启用 "onChange"。
FormProvider 使用正确：你已正确包裹，确保子组件可通过 useFormContext() 访问上下文——但本例中 AddScreen 直接使用 useForm，因此无需 FormProvider（除非需跨多层组件共享 form 实例）。若 AddScreen 是独立表单，建议移除，避免上下文冲突。

修复后的 AddScreen 示例：

export const AddScreen = ({ onSubmit }) => {
  const { handleSubmit, register } = useForm({
    mode: "onSubmit", // 推荐默认模式
  });

  return (

); };

总结：React Hook Form 的 handleSubmit 不是“触发器”，而是“数据管道”——它负责收集、校验并结构化表单数据，最终以纯对象形式交付给你的回调函数。务必确保 onSubmit 函数设计为接收该数据对象，并通过 handleSubmit(callback) 正确绑定，才能获得预期行为。