为什么在表单提交时将 formData 发送到服务器操作？

Question

我正在使用NextJS应用程序路由器和shadcn/ui（使用react-hook-form和zod）。

在我见过的所有代码示例中，表单操作接收formData。但根据我的经验，formData可能并不总是包含所有字段，这会给我带来一些麻烦（解决方案是添加隐藏的输入字段）。

那么发送formData对象有什么好处呢？为什么不直接通过react-hook-form api 使用 form.getValues() 发送表单值并保存所有这些混乱。

export async function serverAction(formData: FormData)

VS

export async function serverAction(data: z.infer<typeof schema>)

Answer 1

表格数据：

• 无需 JS 即可工作，因为浏览器原生支持无需 js 的表单提交。这就是为什么这里的表单提交是服务器端的。
• 本地处理文件上传（非常确定）
• 更好的 nexjs 集成。预取/加载/等等（但这并不是一个很好的论据）
• 打火机包。即不需要像 zod 这样的客户端验证库。

RHF + 佐德：

• 端到端类型的安全性。
• 更好的开发体验——示例中无需手动解析formData。
• 丰富的验证——这意味着您可以使用详细的错误消息更好地验证客户端到服务器端。
• 更好的状态管理，特别是对于大型项目。

对于中型以上的项目，我经常最终使用 rhf + zod，因为就长期开发经验而言，它对我来说效率更高。

对于任何要完成任务的小项目，我使用 next 的原生形式。