通过示例快速学习 useActionState (Nextjs

使用表单时，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"
          id="username"
          name="username"
          defaultvalue={state.username}
          required
        />
        {state.errors?.username && (
          <p classname="text-sm text-red-500">{state.errors.username}</p>
        )}
      </div>

      <div>
        <label htmlfor="password">password:</label>
        <input
          type="password"
          id="password"
          name="password"
          defaultvalue={state.password}
        />
        {state.errors?.password && (
          <p classname="text-sm text-red-500">{state.errors.password}</p>
        )}
      </div>
      <input type="submit" value="sign up" />
    </form>
  );
}

actions.ts：

"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 (Nextjs的详细内容，更多请关注硕下网其它相关文章！