使用数据运行 useFormState 调度

Question

我想在将表单中的数据传递到服务器之前验证其数据。为此，我想将表单操作属性定向到一个函数，该函数将验证客户端的数据并在一切正确的情况下运行 formAction。但我不明白如何将数据从表单操作传递到函数以及从函数传递到 formAction 函数。我使用 next.js、打字稿。我想使用表单状态，拥有 formState 变量，但是如果我调用 formAction，它不需要任何参数，即使我想从表单中提供我的数据。如何将数据传递给validateData函数，然后传递给formAction？ 我使用next.js 14.2.5，react和react-dom 18.2

这是我的问题的 MVP。

"use client";
import { useFormState } from "react-dom";
import farServerFunction from "./func.ts";

export default function Page() {
  const [formState, formAction] = useFormState(farServerFunction, null);
  const validateData = (data: FormData) => {
    const name = data.get("name") as string;
    if (name.length < 5) {
      alert("Name must be at least 5 characters long.");
      return;
    }
    formAction(data); // Expected 0 arguments, but got 1
  }
  return <form action={validateData}>
    <input type="text" name="name" />
    <button type="submit">Submit</button>
  </form>;
}

我尝试过谷歌搜索、chatGPT 和搜索文档，但发现它令人困惑并且不足以理解。

Answer 1

事实证明，useFormState 通过适应您在内部传递的函数来工作。因此，如果您传递一个内部没有任何内容的测试函数，则它将没有预期的参数。所以解决方案是用必要的参数定义函数（例如“

_: any, formData: FormData

”），并且当你在调用formAction时传递参数时，它不会引发错误。