Remix.js中如何将Hooks数据传递至Loader函数？

首先明确核心矛盾：React Router 的 Loader 是在组件渲染前执行的路由/服务端预加载逻辑，而你用组件内的 useFetcher 属于客户端渲染阶段的钩子，两者执行时机完全错开——Loader 跑完了组件才开始渲染，所以组件里拿到的 itemUuid 根本没法逆向传给 Loader，你的初始思路从逻辑上就走不通，得换方向。

最优方案：把获取 itemUuid 的逻辑移到 Loader 里 #

Loader 本身就是用来做页面加载前的数据预取的，直接把获取 itemUuid 和后续 API 调用的逻辑都放在 Loader 里：

export async function AccountLoader({ params }) {
  const { customerUuid, accountUuid } = params;
  
  // 1. 先请求拿到 itemUuid
  const indexResponse = await fetch(`/customers/${customerUuid}/accounts/${accountUuid}/?index`);
  const indexData = await indexResponse.json();
  const itemUuid = indexData.itemUuid;

  // 2. 用 itemUuid 调用目标 API
  const targetResponse = await fetch(`/your-target-api/${itemUuid}`);
  const targetData = await targetResponse.json();

  // 3. 返回所有需要的数据给组件
  return json({ itemUuid, targetData });
}

然后在组件里直接通过 useLoaderData() 获取数据：

import { useLoaderData } from "react-router-dom";

function AccountPage() {
  const { itemUuid, targetData } = useLoaderData();
  
  // 直接使用数据即可
  return (
    <div>
      <p>Item UUID: {itemUuid}</p>
      {/* 渲染 targetData 内容 */}
    </div>
  );
}

特殊场景下的替代方案（仅当接口只能在客户端调用时） #

如果因为某些限制（比如接口依赖客户端环境），没法在 Loader 里请求 itemUuid，可以通过路由跳转携带参数的方式实现：

组件侧逻辑： #

import { useParams, useFetcher, useNavigate } from "react-router-dom";

function AccountPage() {
  const { customerUuid, accountUuid } = useParams();
  const accountFetcher = useFetcher();
  const navigate = useNavigate();

  useEffect(() => {
    // 初始化时触发请求
    if (accountFetcher.type === 'init') {
      accountFetcher.load(`/customers/${customerUuid}/accounts/${accountUuid}/?index`);
    }

    // 拿到 itemUuid 后，携带参数跳转回当前路由
    if (accountFetcher.data?.itemUuid) {
      const itemUuid = accountFetcher.data.itemUuid;
      navigate(`/customers/${customerUuid}/accounts/${accountUuid}?itemUuid=${itemUuid}`);
    }
  }, [accountFetcher, customerUuid, accountUuid, navigate]);

  // 未拿到数据时显示加载状态
  if (!accountFetcher.data) {
    return <div>加载中...</div>;
  }

  return <div>页面内容</div>;
}

Loader 侧逻辑： #

export async function AccountLoader({ request }) {
  const url = new URL(request.url);
  const itemUuid = url.searchParams.get('itemUuid');

  // 没有 itemUuid 时返回空数据或重定向
  if (!itemUuid) {
    return json({ itemUuid: null, targetData: null });
  }

  // 用 itemUuid 调用目标 API
  const targetResponse = await fetch(`/your-target-api/${itemUuid}`);
  const targetData = await targetResponse.json();

  return json({ itemUuid, targetData });
}

关于你之前思路的问题 #

你想的「存本地状态再通过 formData 传递」确实不合理：Loader 是路由层面的逻辑，无法读取组件的本地状态；而且页面加载时 Loader 已经执行完毕，等组件把状态存好，Loader 早就跑完了，完全衔接不上。

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