products.map 不是 console.log() 数据中的函数

Question

'use client'
import React, { useEffect, useState } from 'react';

export default function Page() {
    const [products, setProducts] = useState(null); 

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch("https://dummyjson.com/products");
                const data = await response.json();
                console.log(data)
                setProducts(data); 
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        };

        fetchData();
    }, []);

    if (products === null) {
        return <div>Loading...</div>; 
    }

    return (
        <div>
            <h1>Product List</h1>
            <ul>
                {products.map((product, index) => (
                    <li key={index}>{product.name}</li> 
                ))}
            </ul>
        </div>
    );
}

错误：

未处理的运行时错误
products.map 不是一个函数

为什么

products.map

不是函数？请告诉我为什么。

console.log(data)

我获取了 API 数据，但未在浏览器上显示

Answer 1

正如其他人提到的，API 不会直接返回产品列表，而是作为嵌套键返回。

由于您尝试在未实现它的数据类型上使用

map

，因此会引发错误。

map

仅针对

array

数据类型 (

Array#map

) 定义。

响应如下所示：

type ApiResponse = {
  limit: number;
  products: Array<{
    brand: string;
    category: string;
    description: string;
    discountPercentage: number;
    id: number;
    images: Array<string>;
    price: number;
    rating: number;
    stock: number;
    thumbnail: string;
    title: string;
  }>;
  skip: number;
  total: number;
};

这意味着您需要使用

setProducts(data.products)

而不是

setProducts(data)

。

您还需要更改为

<li key="{index}">{product.name}</li>

到

<li key="{index}">{product.title}</li>

因为产品没有任何名为

name

的密钥。