React项目出现Cannot read properties of undefined (reading 'map')错误求解决

问题核心原因 #

你的错误本质是前后端数据结构不匹配，加上后端代码存在两处逻辑错误，导致前端拿到的dataResponse变为undefined，最终触发map调用失败。

具体修复步骤 #

1. 修正后端API的响应结构 #

后端当前直接返回games数组，但前端代码里尝试读取res.games（期望响应是一个包含games字段的对象），这会导致res.games为undefined，进而setdataResponse(res.games)把dataResponse设为undefined，调用map时必然报错。

修改后端响应代码：

// 原代码
res.status(200).json(games);

// 修改为
res.status(200).json({ games: games });

2. 修复后端循环中的变量错误 #

后端循环里错误地使用数组games而非单个元素game，同时formatDistanceToNowStrict未导入，会导致运行报错：

// 先导入工具函数（需先安装date-fns：npm install date-fns）
import { formatDistanceToNowStrict } from 'date-fns';

// 修正循环逻辑
for (const game of games) {
    // 原错误：games.ProductImage → 改为单个元素game.ProductImage
    game.ProductImage = `data:image/webp;base64,${game.ProductImage.toString('base64')}`;
    // 原错误：games.DateWhenAdded → 改为单个元素game.DateWhenAdded
    game.DateWhenAdded = formatDistanceToNowStrict(game.DateWhenAdded);
}

3. 前端添加双重安全校验 #

即使后端修复完成，前端也需要确保dataResponse始终是可遍历的数组，避免意外情况：

// 方式1：可选链+空数组兜底
{dataResponse?.map((game) => { /* 渲染逻辑 */ })}

// 方式2：数组类型判断
{Array.isArray(dataResponse) && dataResponse.map((game) => { /* 渲染逻辑 */ })}

同时建议把map的参数命名改为game（单个元素），更符合语义：

{Array.isArray(dataResponse) && dataResponse.map((game) => {
    return (
        <div key={game.ProductID}>
            <div>{game.ProductName}</div>
            <div>
                <img src={game.ProductImage} alt={game.ProductName} />
            </div>
            <div>{game.ProductDescription}</div>
            <div>{game.DateWhenAdded}</div>
        </div>   
    )
})}

额外注意事项 #

• 确认后端数据库返回的ProductImage是Buffer类型，否则toString('base64')会报错
• 可在前端添加加载状态提示，比如请求未完成时显示"加载中..."，提升用户体验

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