Remix Loader函数返回多对象JSON异常：商品数据变为undefined求助

问题出在你返回数据的格式上——你用数组[product.result, categories]返回，但前端大概率还是按照之前获取单个商品对象的逻辑在处理，自然会拿到undefined。

解决方案 #

把返回的数组改成包含明确属性的对象，这样前端可以通过属性名精准获取对应数据：

修改Loader里的返回语句：

// 原来的数组返回
// return json([product.result, categories]);

// 改成对象返回
return json({ product: product.result, categories });

修改后的完整Loader关键部分 #

export const loader: LoaderFunction = async ({ request }) => {
  try {
    const url = new URL(request.url);
    const id = url.searchParams.get("id");
    console.log("Product ID:", id);
    const categories = await getCategories();
    if (id === null) {
      return json(
        { error: "Missing id parameter", categories },
        { status: 400 }
      );
    } else {
      const product = await getPrintfulProduct({ id });
      console.log("Fetched Product Data:", product);
      if (product.error) {
        if (product.error.reason === "NotFound") {
          return json(
            { error: "Product not found", categories },
            { status: 404 }
          );
        }
        return json({ error: product.error, categories }, { status: 500 });
      }
      // 这里改为对象返回
      return json({ product: product.result, categories });
    }
  } catch (error) {
    console.error("Loader Error:", error);
    return json({ error: "Internal Server Error" }, { status: 500 });
  }
};

前端适配 #

在组件里通过解构获取数据：

import { useLoaderData } from "@remix-run/react";

export default function ProductPage() {
  const { product, categories } = useLoaderData();
  // 现在可以正常使用product和categories了
  return (
    // 你的组件渲染逻辑
  );
}

为什么数组不行？ #

之前单独返回product.result时，前端拿到的是单个商品对象；改成数组后，useLoaderData()拿到的是数组，如果你还是用const product = useLoaderData()，那product其实是[商品对象, 分类列表]，访问原来的商品属性自然会得到undefined。

另外，你在错误分支里已经用对象格式返回（比如{ error: "...", categories }），保持统一的对象结构更符合代码一致性，也更便于前端处理。

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