Next.js TypeScript 表单处理与 Nextjs 中的服务器操作 - 错误：e._formData.get 不是函数

Question

我正在尝试在项目中使用 TypeScript 在 Next.js 14 服务器操作中处理表单提交。我正在使用

FormData

收集表单数据，但遇到错误：

Error: e._formData.get is not a function

。

这是我的代码：

export default async function PageDashboard() {
  async function handleAuth(formData: FormData) {
    "use server";

    const data = {
      email: formData.get("email"),
      password: formData.get("password"),
    };

    console.log(data);
  }

  return (
    <form className="space-y-6" action={handleAuth}>
      <input name="email" placeholder="Email" className="border" />
      <input name="password" placeholder="Password" className="border" />
      <button name="submit" type="submit" className="border">
        Submit
      </button>
    </form>
  );
}
[![Error shown on client side:](https://i.stack.imgur.com/pp12f.png)](https://i.stack.imgur.com/pp12f.png)
[![Error shown on server side:](https://i.stack.imgur.com/gMmIP.png)](https://i.stack.imgur.com/gMmIP.png)

I've tried using FormData in the handleAuth function to get the email and password from the form data, but I'm getting the mentioned error.

How can I correctly handle form submission with FormData in a Next.js project using TypeScript?

Answer 1

看起来您对服务器操作中的

formData

处理不当。请记住，Next.js 14 服务器操作需要表单事件中的

handleSubmit

事件，而不是直接使用

FormData

。因此，您的

handleAuth

应首先从事件中提取表单数据。查看有关在 Next.js 中使用服务器操作处理表单的文档，重点关注如何在服务器组件中正确检索表单数据。另外，请确保您正确使用

FormData

API，并且您的服务器端逻辑与 Next.js 对服务器操作的期望兼容。