React 新钩子 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 返回三件事：

1. 第一个变量 error 用于表示错误。在本例中，它是一个字符串，但它实际上可以是任何类型。

2. 第二个变量submitAction是触发表单提交的函数。

3. 第三个变量 isPending 是一个布尔值，表示待处理状态。它对于在提交表单时禁用元素或显示微调器很有用。

• useActionState 需要两个参数：

1. 第一个参数是表单提交时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 请求处理程序

我正在使用一个简单的 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>
  );
}

结论

React 19 的 useActionState 钩子在处理表单中应该始终存在的两件事时非常有用：挂起状态和验证错误。该钩子负责更新这些“状态变量”，如果您想比较值，甚至可以提供对 previousState 的引用。

提交表单并且没有返回错误后会发生什么由应用程序决定。在大多数情况下，这意味着将用户重定向到另一个页面或显示成功消息。

以上是React 新钩子 useActionState的详细内容。更多信息请关注PHP中文网其他相关文章！