예제(Next.js)를 통해 useActionState를 빠르게 알아보세요.

양식을 사용할 때 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 (
    

Username:

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 };
}
</signupactionstate>

useActionState는 서버 작업의 약속이 아직 해결 중인지 여부를 나타내는 isPending 속성(예)도 반환합니다.

Reference isPending은 진행 중인 작업이 완료되기 전에 사용자가 여러 번 빠르게 연속해서 클릭하는 것을 방지하기 위해 제출 버튼과 같은 양식 요소를 일시적으로 비활성화합니다.

useActionState 대 useFormAction 및 useFormStatus

useFormAction과 useFormStatus에 익숙하다면 useActionState가 매우 유사하다는 것을 알게 될 것입니다.

기본적으로 두 후크의 기능을 결합하고 서버 작업이 양식에만 사용되는 것이 아니라는 점을 반영하여 이름이 변경되었습니다(버튼 및 기타 요소와 함께 useActionState를 사용할 수도 있습니다).

useFormStatus는 Next.js 15부터 더 이상 사용되지 않으므로 앞으로는 useActionState를 가져와야 합니다.

위 내용은 예제(Next.js)를 통해 useActionState를 빠르게 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!