React 新鉤子 useActionState-js教程-PHP中文網

React 新鉤子 useActionState

Barbara Streisand

發布： 2024-12-17 15:11:21

原創

621 人瀏覽過

React New hook useActionState

通常，在使用表單時，您需要：

a) 顯示載入程式

b) 顯示驗證錯誤

這通常意味著管理幾個狀態變數。但隨著 React 19 中引入的新 useActionState 鉤子，現在有一種更簡單的方法來處理它。

連結

示範
程式碼庫

React Hook：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 請求處理程序

我正在使用一個簡單的 lambda 函數，它只檢查名稱是否是至少包含 2 個字元的字串。還有 2 秒的延遲，只是為了給 UI 一些時間來顯示微調器。

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

登入後複製