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 フックにより、より簡単に処理できるようになりました。

リンク

デモ
コードベース

React フック: 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 は 3 つのものを返します:

最初の変数 error はエラーを表します。この場合は文字列ですが、実際には任意の型にすることができます。
2 番目の変数 submitAction は、フォームの送信をトリガーする関数です。
3 番目の変数 isPending は、保留状態を示すブール値です。要素を無効にしたり、フォームの送信時にスピナーを表示したりする場合に便利です。

useActionState には 2 つのパラメータが必要です:

最初のパラメータは、フォームの送信時に submitAction によってトリガーされる関数です。
2 番目のパラメータはエラーの初期値です。この場合は空の文字列ですが、代わりに「すべてのフィールドに入力」などを使用することもできます。

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>
  );
}

ログイン後にコピー