在 remix 加载器函数中返回带有多个对象数组的 json

Question

这是一个使用 Printful 和 Cloudinary API 的混音项目。我无法弄清楚如何让两个对象正确返回。在加载器函数中，我返回产品信息的 JSON 以及用于放置产品的类别列表。

如果像这样返回product.result，则返回json(product.result);然后产品就会按预期呈现。如果我包含这样的类别，则返回 json([product.result,categories]);那么产品返回未定义。这是我的加载函数。

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.result, categories]);
    }
  } catch (error) {
    console.error("Loader Error:", error);
    return json({ error: "Internal Server Error" }, { status: 500 });
  }
};

如果您认为这不是加载器功能或者有帮助，我可以分享整个代码。

Answer 1

我建议这样做：

return json({ product: product.result, categories })

这将返回一个像这样的对象：

{
  "product": { ... },
  "categories": [ ... ],
}

然后在您的组件中，您可以执行以下操作：

const { product, categories } = useLoaderData<typeof loader>()