React调用Express+MongoDB后端报data.map is not a function错误求助

问题根源 #

map方法仅能在数组上调用，出现这个错误说明你赋值给data的res.data不是数组。虽然你能在控制台看到数据，但后端返回的大概率是包裹数组的对象（比如{ data: [你的数据] }或{ items: [你的数据] }），而非直接返回数组。

解决步骤 #

1. 确认返回数据结构：仔细查看控制台打印的res.data，找到数组所在的属性名。比如如果输出是{ code: 200, data: [...] }，数组就存放在res.data.data中。
2. 修正数据赋值逻辑：修改useEffect中的代码，确保传给setData的是数组：

   useEffect(() => {
     axios.get("http://localhost:5000/api/items/")
       .then(res => {
         console.log(res.data); 
         // 根据实际返回结构调整，这里假设数组在res.data.data中
         setData(Array.isArray(res.data) ? res.data : res.data.data);
       })
       .catch(err => console.log(err));
   }, []);
   

3. 添加渲染安全判断：为避免后续潜在问题，在渲染时先判断data是否为数组，再调用map：

   {
     Array.isArray(data) ? data.map(item => <CardSmall key={item._id} {...item} />) : null
   }
   

额外建议 #

• 检查Express后端接口代码，确认返回格式：如果后端是res.json({ data: items })，前端需要取res.data.data；如果是res.json(items)，才是直接返回数组。
• 之前用json-server正常是因为它默认返回数组结构，而你的Express后端可能做了统一的响应包装。

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