React 第四十一节Router 中 useActionData 使用方法案例以及注意事项

一、useActionData前言

useActionData 是 React Router 提供的一个钩子函数，用于获取在路由的 action 函数中返回的数据。它通常与表单提交（通过 <Form> 组件）配合使用，用于处理表单提交后的服务器响应数据（如错误信息、成功状态等）。

二、useActionData核心用途

处理表单提交结果：获取表单提交后服务器返回的数据（例如验证错误、成功消息等）。
动态反馈用户：根据 action 返回的数据更新 UI（如显示错误提示）。
简化数据流：无需手动管理状态，直接通过路由 action 获取数据。

三、useActionData基本流程

用户提交表单（通过 <Form> 组件）。
路由的 action 函数处理提交数据（例如发送到服务器）。
action 返回数据（如错误对象、成功状态）。
组件通过 useActionData() 获取该数据并渲染反馈。

四 useActionData示例：用户登录表单

4.1、 定义路由配置（使用 createBrowserRouter）

// src/main.jsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import LoginPage, { loginAction } from "./LoginPage";const router = createBrowserRouter([{path: "/login",element: <LoginPage />,action: loginAction, // 处理表单提交的 action 函数},
]);ReactDOM.createRoot(document.getElementById("root")).render(<RouterProvider router={router} />
);

4.2、 定义 Action 函数（处理表单提交）

// src/LoginPage.jsx
export async function loginAction({ request }) {const formData = await request.formData();const email = formData.get("email");const password = formData.get("password");// 简单的前端验证if (!email.includes("@")) {return { error: "邮箱格式不正确" };}try {// 模拟发送登录请求到服务器const response = await fetch("/api/login", {method: "POST",body: JSON.stringify({ email, password }),});const result = await response.json();if (result.success) {// 登录成功，重定向到主页return redirect("/");} else {// 返回服务器错误return { error: result.message };}} catch (err) {// 网络错误处理return { error: "网络请求失败，请重试" };}
}

4.3、 在组件中使用 useActionData

// src/LoginPage.jsx
import { Form, useActionData } from "react-router-dom";export default function LoginPage() {const actionData = useActionData(); // 获取 action 返回的数据return (<div><h1>用户登录</h1><Form method="post">{/* 显示错误信息 */}{actionData?.error && (<div style={{ color: "red" }}>{actionData.error}</div>)}<inputtype="email"name="email"placeholder="邮箱"required/><inputtype="password"name="password"placeholder="密码"required/><button type="submit">登录</button></Form></div>);
}

五、参数与返回值

参数：无。

返回值：
最近一次路由 action 函数返回的数据。
如果没有提交过 action 或 action 未返回数据，则返回 undefined。

六、注意事项

6.1、必须与 组件配合使用

useActionData 依赖于 React Router 的 <Form> 触发的 action 提交。如果使用普通 <form> 或手动提交，数据将无法被捕获。

6.2、数据类型一致性

Action 函数可以返回任意类型的数据（对象、字符串等），但组件中需根据实际返回类型处理渲染逻辑。

6.3、作用范围

数据仅与当前路由的 action 关联。如果跳转到其他路由，useActionData 会重置。

6.5、异步处理

Action 函数可以是异步的（如示例中的 async/await），但需确保正确处理加载状态（可配合 useNavigation 显示加载提示）。

七、高级用法：配合 useNavigation 处理加载状态

import { useActionData, useNavigation, Form } from "react-router-dom";function LoginPage() {const actionData = useActionData();const navigation = useNavigation();// 表单正在提交时显示加载状态const isSubmitting = navigation.state === "submitting";return (<Form method="post">{/* 错误提示 */}{actionData?.error && <div className="error">{actionData.error}</div>}<input name="email" /><input name="password" type="password" /><button type="submit" disabled={isSubmitting}>{isSubmitting ? "登录中..." : "登录"}</button></Form>);
}

八、与 useLoaderData 的区别

useActionData： 获取表单提交后的响应数据 表单提交（POST/PUT/DELETE）触发
useLoaderData： 获取路由初始化时的数据 页面加载或跳转（GET）触发

九、常见场景

9.1、表单验证错误

Action 中校验数据格式，返回错误信息，前端直接渲染。

9.2、API 错误处理

捕获网络请求异常，返回统一错误提示。

9.3、操作成功反馈

返回成功状态并在页面显示“操作成功”提示。

useActionData是 React Router 提供了一种声明式的方式处理表单提交与反馈，用于简化了数据流管理。