TypeError: products.Map在nextjs中不是一个函数

Question

我试图在json文件中循环产品，我一直得到这个错误TypeError: products。map不是函数

这是我的代码

import React from "react"; import Link from "next/link";
function shop({ products }) { return (
<div>
<nav>
<Link href="/">Home</Link>
<Link href="/shop">Shop</Link>
</nav>
<div className="title1">
<h1>Explore All Products</h1>
</div>
<>
{products.map((product) => { return (
<div key={product.id}>
<Link href="">
<h2>
{product.id} {product.title}
</h2>
</Link>
</div>
);
})}
</>
</div>   ); }
export default shop;
export async function getStaticProps() { const response = await fetch("https://dummyjson.com/products"); const data = await response.json(); console.log(data);
return { props: { products: data,
},   }; }

我尝试了很多其他人的方法来解决堆栈溢出问题，但是没有任何效果

Answer 1

> import React from "react"; import Link from "next/link";
> 
> function shop({ products }) {   return (
>     <div>
>       <nav>
>         <Link href="/">Home</Link>
>         <Link href="/shop">Shop</Link>
>       </nav>
>       <div className="title1">
>         <h1>Explore All Products</h1>
>       </div>
>       <>
>         {products.map((product) => {
>           return (
>             <div key={product.id}>
>               <Link href="">
>                 <h2>
>                   {product.id} {product.title}
>                 </h2>
>               </Link>
>             </div>
>           );
>         })}
>       </>
>     </div>   ); }
> 
> export default shop;
> 
> export async function getStaticProps() {   const response = await
> fetch("https://dummyjson.com/products");   if (response.status !==
> 200){
>     console.log(`Error: ${response.status}`);   }   const data = await response.json();
>   
> 
>   return {
>     props: {
>         products: data.products, //instead of just "data"
>     },   }; }

Answer 2

端点https://dummyjson.com/products返回如下对象:

{
"products": [...],
"total": 100,
"skip": 0,
"limit": 30
}

您想要的数据在products属性中，因此您只需使用:

return { props: { products: data.products } };