React 새로운 후크 useActionState-JS 튜토리얼-php.cn

React 새로운 후크 useActionState

Barbara Streisand

풀어 주다： 2024-12-17 15:11:21

원래의

618명이 탐색했습니다.

React New hook useActionState

일반적으로 양식 작업 시 다음을 수행할 수 있습니다.

a) 로더 표시

b) 유효성 검사 오류 표시

이는 종종 몇 가지 상태 변수를 관리하는 것을 의미합니다. 하지만 React 19에 도입된 새로운 useActionState 후크를 사용하면 이제 이를 처리하는 더 간단한 방법이 있습니다.

모래밭

데모
코드베이스

리액트 훅: useActionState

다음 스니펫에서 useActionState가 어떻게 사용되는지 확인하세요.

import { useActionState } from "react";
import Loader from "@/components/loader";

function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));

      if (error) {
        return error;
      }

      return "";
    },
    ""
  );

  return (
    <form action={submitAction}>
      Name: <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Save
      </button>
      {isPending && <Loader />}
      {error && <p>{error}</p>}
    </form>
  );
}

로그인 후 복사

몇 가지 언급할 사항:

useActionState는 세 가지를 반환합니다.

첫 번째 변수인 error는 오류용입니다. 이 경우에는 문자열이지만 실제로는 어떤 유형이든 될 수 있습니다.
두 번째 변수 submitAction은 양식 제출을 실행하는 함수입니다.
세 번째 변수 isPending은 보류 상태를 나타내는 부울입니다. 양식을 제출할 때 요소를 비활성화하거나 스피너를 표시하는 데 유용합니다.

useActionState에는 두 가지 매개변수가 필요합니다.

첫 번째 매개변수는 양식이 제출될 때 submitAction에 의해 실행되는 함수입니다.
두 번째 매개변수는 오류의 초기값입니다. 이 경우에는 빈 문자열이지만 대신 "모든 필드 채우기"와 같은 것을 사용할 수 있습니다.

useActionState는 기본적으로 FormData의 인스턴스인 formData를 제공하며, 이는 양식의 필드를 나타내는 객체입니다.

양식 입력 필드:

<input type="text" name="name" />

로그인 후 복사

다음과 같이 읽을 수 있습니다.

formData.get("name");

로그인 후 복사

name은 입력 필드의 이름입니다.

error는 서버의 오류를 표시합니다. 없으면 비어있습니다.
isPending은 양식이 제출되면 후크에 의해 자동으로 true로 업데이트되고 백엔드 응답이 수신되면 다시 false로 설정됩니다.

오류가 없으면 useActionState가 양식 재설정도 처리합니다.

백엔드에 대한 요청

이 데모에서 updateName 함수는 매우 기본적이며 이름을 전달하여 백엔드에 POST 요청을 보냅니다. 백엔드가 오류를 반환하면 함수가 오류를 반환합니다. 그렇지 않으면 빈 문자열을 반환합니다. 이는 서버에서 오류가 없음을 의미합니다.

async function updateName(name) {
  const response = await fetch("/lambda-function", {
    method: "POST",
    body: JSON.stringify({ name }),
  });

  if (!response.ok) {
    const { message } = await response.json();
    return message;
  }

  return "";
}

로그인 후 복사

백엔드 POST 요청 핸들러

이름이 2자 이상의 문자열인지 확인하는 간단한 람다 함수를 사용하고 있습니다. 또한 UI에 스피너를 표시할 시간을 주기 위해 2초의 지연이 있습니다.

import { useActionState } from "react";
import Loader from "@/components/loader";

function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));

      if (error) {
        return error;
      }

      return "";
    },
    ""
  );

  return (
    <form action={submitAction}>
      Name: <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Save
      </button>
      {isPending && <Loader />}
      {error && <p>{error}</p>}
    </form>
  );
}

로그인 후 복사