Next.js项目中Fetch API调用无结果问题排查求助

问题根源 #

1. API响应结构处理错误
   https://dummyjson.com/products的响应是一个包含products数组的对象（结构为{ products: Product[], total: number, skip: number, limit: number }），你直接将整个响应对象赋值给了products，导致组件接收的products是对象而非数组，map方法无法执行，自然渲染不出列表。

2. 缩略图展示方式错误
   你用<p>标签输出缩略图的URL字符串，没有用<img>标签加载图片资源。

3. JSX注释语法错误
   代码里的注释使用了反引号（），这会导致JSX语法解析失败，应该使用{/* 注释内容 */}`的标准JSX注释格式。

修正后的完整代码 #

import { GetServerSideProps } from 'next';

type Product = {
  id: number;
  title: string;
  price: number;
  thumbnail: string;
};

interface ProductsProps {
  products: Product[];
}

export default function Products({ products }: ProductsProps){
  return (
    <main>
      <h1 className="productHeader">Our Products</h1>
      <div className="products">
        {products.map((product) => (
          <div className="card" key={product.id}>
            {/* 用img标签加载缩略图 */}
            <img src={product.thumbnail} alt={product.title} />
            <p>{product.title}</p> 
            <p>price:{product.price}$</p>
          </div>
        ))}
      </div>
    </main>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://dummyjson.com/products');
  // 解构取出响应里的products数组
  const { products } = await res.json();

  return {
    props: {
      products,
    },
  };
};

额外说明 #

• 因为getServerSideProps已经确保会返回products数组，所以组件里可以直接使用products.map，无需额外的products &&判断（当然保留也不影响）。
• 给<img>添加alt属性可以提升页面的可访问性。

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