我们刚刚的演示可以称之为StateLessForm，因为我们没有追踪表单的状态，但是为了处理表单的数据校验错误，我们需要引入useActionState这个 hook。 让我们的表单能够支持错误状态的追踪

"use client";

import { SubmitButton } from "@/components/ui/SubmitButton";
import { useStateForm } from "@/lib/useStateForm";
import createUser from "./action";
import Code from "./code.mdx";

export default function Page() {
  const [{ error, data }, submit] = useStateForm(createUser);
  return (
    <form className=" flex flex-col gap-2" action={submit}>
      <label className="flex items-center">
        <div className="px-2 w-[100px]">邮箱：</div>
        <input type="text" name="email" className="input" />
      </label>
      {error?.email?._errors && (
        <div className="text-red-600">
          {error?.email?._errors?.join("")}
        </div>
      )}

      {data && <div> 提交数据:{data} </div>}
      <SubmitButton />
    </form>
  );
}