通过示例快速学习 useActionState (Next.js

使用表单时，useActionState 挂钩简化了捕获表单值并将其作为 FormData 传递到服务器操作的过程。

useActionState 还通过使用服务器操作返回的值自动更新状态变量来管理状态。这对于渲染输入字段验证错误特别有帮助，如下面使用 Zod 的示例所示。

form.tsx:

"use client";

import { useActionState } from "react";
import { signUp } from "../actions";

export default function SignUp() {
  const [state, action] = useActionState(signUp, {});

  return (
    <form action={action}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
         >



<p>actions.ts:<br>
</p>

<pre class="brush:php;toolbar:false">"use server";

import { z } from "zod";

const SignUpSchema = z.object({
  username: z.string(),
  password: z
    .string()
    .min(8, { message: "Be at least 8 characters long" })
    .regex(/[a-zA-Z]/, { message: "Contain at least one letter." })
    .regex(/[0-9]/, { message: "Contain at least one number." })
    .regex(/[^a-zA-Z0-9]/, {
      message: "Contain at least one special character.",
    })
    .trim(),
});

export type SignUpActionState = {
  username?: string;
  password?: string;
  errors?: {
    username?: string[];
    password?: string[];
  };
};

export async function signUp(
  _prevState: SignUpActionState,
  form: FormData
): Promise<SignUpActionState> {
  const username = form.get("username") as string;
  const password = form.get("password") as string;

  const validatedFields = SignUpSchema.safeParse({
    username,
    password,
  });

  if (!validatedFields.success) {
    return {
      username,
      password,
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  // process validated form inputs here

  return { username, password };
}

useActionState 还返回一个 isPending 属性（示例），指示服务器操作的 Promise 是否仍在解析。

参考 isPending 暂时禁用表单元素，例如提交按钮，以防止用户在正在进行的操作完成之前快速连续多次单击它。

useActionState 与 useFormAction 和 useFormStatus

如果您熟悉 useFormAction 和 useFormStatus，您会发现 useActionState 非常相似。

本质上，它结合了两个钩子的功能，并被重命名以反映服务器操作不仅仅适用于表单（您还可以将 useActionState 与按钮和其他元素一起使用。）

请记住，useFormStatus 从 Next.js 15 开始已被弃用，因此您应该继续导入 useActionState。

以上是通过示例快速学习 useActionState (Next.js的详细内容。更多信息请关注PHP中文网其他相关文章！