React 19 的 useActionState：高效表单管理的终极工具

React 19 最近正式发布，useActionState 是其新引入的一个 Hook，它旨在简化表单提交和状态管理。useActionState 接受一个异步操作（Action）和默认值，并返回当前的状态、提交函数和加载状态。这个 Hook 主要解决了在表单提交时的繁琐状态管理问题，使代码更加简洁和直观。

1、主要特点

(1) 待定状态管理：useActionState 提供了一个待定状态（isPending），该状态在请求开始时启动，并在最终状态更新提交时自动重置。

(2) 错误处理：它允许你返回错误，并且可以自动处理这些错误。

(3) 乐观更新：支持新的 useOptimistic Hook，可以在请求提交时向用户显示即时 UI 变化。

(4) 与 <form> 元素集成：<form> 元素现在支持将函数传递给 action 和 formAction 属性，自动管理表单提交。

2、代码示例

下面是一个使用 useActionState 的简单示例，展示了如何创建一个表单，该表单在提交时调用异步函数，并处理加载状态和错误：

import { useActionState } from 'react';

// 模拟异步更新名称的函数
async function updateName(name) {
  // 模拟异步操作，例如 API 调用
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (name === "error") {
        reject("更新失败");
      } else {
        resolve({ message: "更新成功" });
      }
    }, 1000);
  });
}

function Form() {
  // 使用 useActionState 钩子
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error; // 返回错误
      }
      // 处理成功的情况，可以进行重定向或其他操作
      return null;
    },
    null // 初始状态
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" placeholder="Enter name" />
      <button type="submit" disabled={isPending}>Update</button>
      {isPending && <p>Updating...</p>}
      {state && <p>{state}</p>} {/* 显示错误或成功消息 */}
    </form>
  );
}

在这个示例中，useActionState 接受一个异步函数 updateName 作为参数，该函数模拟了一个 API 调用。表单提交时，useActionState 会调用这个函数，并根据返回的结果更新状态。如果操作成功，可以进行进一步的处理，如重定向；如果失败，则显示错误消息。isPending 用于控制按钮的禁用状态，以防止在异步操作进行中多次提交。

参考链接：

(1) https://react.dev/blog/2024/12/05/react-19#new-hook-useactionstate

(2) https://react.dev/reference/react/useActionState