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

1. 最初の変数 error はエラーを表します。この場合は文字列ですが、実際には任意の型にすることができます。

2. 2 番目の変数 submitAction は、フォームの送信をトリガーする関数です。

3. 3 番目の変数 isPending は、保留状態を示すブール値です。要素を無効にしたり、フォームの送信時にスピナーを表示したりする場合に便利です。

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

1. 最初のパラメータは、フォームの送信時に submitAction によってトリガーされる関数です。

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

結論

React 19 の useActionState フックは、フォームに常に含める必要がある 2 つのもの、つまり保留状態と検証エラーを処理するときに役立ちます。このフックは、これらの「状態変数」の更新を処理し、値を比較する場合には、previousState への参照も提供します。

フォームが送信され、エラーが返されなかった後に何が起こるかはアプリケーション次第です。ほとんどの場合、これはユーザーを別のページにリダイレクトするか、成功メッセージを表示することを意味します。

以上がReact 新しいフック useActionStateの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。