如何在Remix路由组件中同时使用useLoaderData()与useActionData()（规避指定方案）

方案1：在Action中返回包含最新数据的结果，组件优先使用Action数据 #

核心思路是让action处理完表单逻辑后，同步获取并返回与loader一致的最新数据，组件内优先读取action返回的结果，无结果时再使用loader数据，确保数据一致性。

// 路由组件代码
import { useLoaderData, useActionData, Form } from "@remix-run/react";
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";

// Loader：初始加载数据
export async function loader({ request }: LoaderFunctionArgs) {
  const initialData = await fetchYourDataSource(); // 替换为你的数据获取逻辑
  return { data: initialData, errors: null };
}

// Action：处理表单验证与提交
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const formValues = Object.fromEntries(formData);
  
  // 表单验证逻辑
  const validationErrors = validateForm(formValues);
  
  if (validationErrors) {
    // 验证失败：重新获取最新数据，同时返回错误和用户输入值
    const latestData = await fetchYourDataSource();
    return { 
      data: latestData, 
      errors: validationErrors,
      formValues // 保留用户输入，避免表单重置
    };
  }

  // 验证通过：处理表单提交，再获取更新后的数据
  await processFormSubmission(formValues); // 替换为你的表单处理逻辑
  const updatedData = await fetchYourDataSource();
  return { data: updatedData, errors: null, formValues: null };
}

export default function YourRoute() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  
  // 优先使用action返回的数据，否则用loader的初始数据
  const { data, errors, formValues } = actionData || loaderData;

  return (
    <div>
      {/* 展示验证错误 */}
      {errors && (
        <div className="error-container">
          {Object.entries(errors).map(([field, message]) => (
            <p key={field}>{message}</p>
          ))}
        </div>
      )}

      {/* 表单：用formValues保留用户输入，否则用data的初始值 */}
      <Form method="post">
        <input
          name="username"
          defaultValue={formValues?.username || data.username}
        />
        <input
          name="email"
          defaultValue={formValues?.email || data.email}
        />
        <button type="submit">提交</button>
      </Form>

      {/* 展示业务数据 */}
      <div className="data-display">
        <h3>当前数据</h3>
        <p>{data.someInfo}</p>
      </div>
    </div>
  );
}

方案2：使用useRevalidator强制Loader重新加载 #

如果希望loader和action逻辑完全分离，可通过useRevalidator的revalidate方法，在action返回结果后触发loader重新获取数据，确保loader数据始终最新，同时保留action返回的错误/成功状态。

// 路由组件代码
import { useLoaderData, useActionData, Form, useRevalidator } from "@remix-run/react";
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
import { useEffect } from "react";

// Loader：负责数据获取
export async function loader({ request }: LoaderFunctionArgs) {
  return fetchYourDataSource();
}

// Action：仅处理表单逻辑，返回错误或成功状态
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const formValues = Object.fromEntries(formData);
  
  const validationErrors = validateForm(formValues);
  if (validationErrors) {
    // 返回错误和用户输入，避免表单重置
    return { errors: validationErrors, formValues };
  }

  await processFormSubmission(formValues);
  return { success: true };
}

export default function YourRoute() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const { revalidate } = useRevalidator();

  // 当action有返回结果时，强制重新加载loader数据
  useEffect(() => {
    if (actionData) {
      revalidate();
    }
  }, [actionData, revalidate]);

  return (
    <div>
      {actionData?.errors && (
        <div className="error-container">
          {Object.values(actionData.errors).map(msg => <p key={msg}>{msg}</p>)}
        </div>
      )}
      {actionData?.success && <div className="success">提交成功！</div>}

      <Form method="post">
        <input
          name="username"
          defaultValue={actionData?.formValues?.username || loaderData.username}
        />
        <input
          name="email"
          defaultValue={actionData?.formValues?.email || loaderData.email}
        />
        <button type="submit">提交</button>
      </Form>

      <div className="data-display">
        <h3>当前数据</h3>
        <p>{loaderData.someInfo}</p>
      </div>
    </div>
  );
}

方案选择建议 #

• 方案1适合需要在表单提交后立即获取最新数据并展示的场景，无需额外依赖hook，逻辑紧凑。
• 方案2适合loader和action职责清晰分离的场景，通过revalidate保证数据同步，代码结构更清晰。

内容的提问来源于stack exchange，提问作者jon