MERN栈React项目报错：Uncaught TypeError: records.map is not a function

这个报错的核心原因很明确：你调用map的records不是数组，map方法只能在数组类型的数据上执行。

排查步骤 #

先在你的fetchdata函数里加一行打印，确认接口返回的数据结构：

const json = await data.json()
console.log('接口返回数据：', json) // 新增打印

你说日志打印数据正常，但大概率是接口返回的不是纯数组，而是一个包裹了数组的对象（比如{ data: [产品列表] }或者{ products: [产品列表] }）。如果直接把整个对象赋值给records，调用map自然会报错。

修复方案 #

根据接口返回的结构调整赋值逻辑：

1. 如果接口返回的是带包裹层的对象（比如{ data: [...] }），修改setData的参数：

if (data.ok) {
    setData(json.data) // 取对象中的数组部分
}

2. 如果接口返回的就是纯数组，可以把初始状态设为空数组，避免null判断：

const [records, setData] = useState([]) // 初始值从null改为[]

这样渲染时可以简化成：

<div className='productsdata'>
    {records.map((record) => (
        <RecordList key={record._id} record={record} />
    ))}
</div>

额外建议 #

如果后端接口是你自己写的，可以检查一下接口返回逻辑，确保返回的是纯数组（比如res.json(products)而不是res.json({ data: products })），这样前后端交互更直观。

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