API 数据正在传递但未渲染

Question

我正在使用 nextjs 和 woocommerce Rest api 构建一个电子商务网站。但我一直面临着将产品/数据从 woocommerce 渲染到 nextjs 前端的问题。我已经设置了用于获取产品的端点，并且在控制台中显示它们已通过，但是每当我尝试使用地图在主页上呈现它们时，它都会说没有产品。

控制台：https://prnt.sc/DqBK_QZv3Lfv

{
import axios from "axios";
import { Albert_Sans, Manrope } from "next/font/google";
import Navbar from "./Blocks/Navbar";
import Hero from "./Component/Hero";
import InfiniteCarousel from "./Component/InfiniteCarousel";
import Logos from "./Component/Logos";
import Category from "./Component/Category";
import("next").InferGetStaticPropsType;

const albert = Albert_Sans({ subsets: ["latin"], weight: ["400", "700"] });
const manrope = Manrope({ subsets: ["latin"] });

export async function getStaticProps() {
  try {
    const { data: products } = await axios.get(
      "http://localhost:3000/api/get-products"
    );

    const data = { products: products || [] };

    return {
      props: data,
    };
  } catch (error) {
    console.error("Error fetching products:", error);
    return {
      props: {
        products: [],
      },
    };
  }
}

export default function Home({ products }) {
  console.log("Products received in Home component:", products);

  return (
    <main
      className={`flex min-h-screen mx-auto bg-dark-shade-1 flex-col items-center ${manrope.className}`}
    >
      <Navbar />
      <Hero />
      <InfiniteCarousel className="w-full" />
      <Logos />
      <Category />
      {products.length > 0 ? (
        <div className="products-container">
          {products.map((product) => (
            <div key={product.id} className="product">
              <h3 className="text-white text-h2">{product.name}</h3>
              <p className="text-white text-l2">{product.price}</p>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-white">No Products Found</p>
      )}
    </main>
  );
}

}

Answer 1

我想应该是：

   products.product.map((productItem) => (
      <div key={product.id} className="product">
        <h3 className="text-h2 text-white">{productItem.name}</h3>
        <p className="text-l2 text-white">{productItem.price}</p>
      </div>
    ));

因为你的产品数据就在里面

products.product