React项目调用MongoDB数据时出现products.map is not a function错误

我在React（Next.js）项目中尝试从MongoDB数据库展示数据，API已成功从数据库获取数据，但在使用products.map()方法渲染数据时，出现“products.map is not a function”错误。

原代码 #

"use client";

import React from "react";
import axios from "axios";
import { NextResponse } from "next/server";

export default function GetProductPage() {
    const [products, setProducts] = React.useState([]);
    const getProducts = async () => {
        const response = await axios.get("/api/admin/products");
        setProducts(response.data);
    };

    React.useEffect(() => {
        getProducts();
    }, []);

    return (
        <div>
            <tbody className="statement_table__body">
                {products.map((product) => (
                    <tr key={product._id}>
                        <td>{product.prod_name}</td>
                        <td>{product.prod_price}</td>
                        <td>{product.cap_return}</td>
                        <td>{product.inv_return}</td>
                        <td>{product.return_period}</td>
                    </tr>
                ))}
            </tbody>
        </div>
    )
}

问题分析 #

从截图信息来看：

• 控制台明确报错products.map is not a function，说明当前products不是数组类型
• API返回的数据是一个对象，其中包含products字段，该字段才是我们需要的数组数据（结构类似{ products: [...] }）

解决方案 #

1. 修正数据赋值：修改setProducts的参数，从response.data改为response.data.products，直接取到数组数据
2. 添加安全校验：在使用map前先判断products是否为数组，避免异常情况导致报错
3. 清理无用代码：移除客户端组件中不需要的NextResponse导入

修正后的代码 #

"use client";

import React from "react";
import axios from "axios";

export default function GetProductPage() {
    const [products, setProducts] = React.useState([]);
    const getProducts = async () => {
        try {
            const response = await axios.get("/api/admin/products");
            // 取返回对象中的products数组，异常时默认空数组
            setProducts(response.data.products || []);
        } catch (err) {
            console.error("获取产品数据失败:", err);
        }
    };

    React.useEffect(() => {
        getProducts();
    }, []);

    return (
        <div>
            <tbody className="statement_table__body">
                {/* 先判断是否为数组再执行map */}
                {Array.isArray(products) && products.map((product) => (
                    <tr key={product._id}>
                        <td>{product.prod_name}</td>
                        <td>{product.prod_price}</td>
                        <td>{product.cap_return}</td>
                        <td>{product.inv_return}</td>
                        <td>{product.return_period}</td>
                    </tr>
                ))}
            </tbody>
        </div>
    )
}

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