TypeError:映射数据到Material UI卡片渲染餐饮切换菜单时读undefined属性报错

报错原因 #

你遇到的TypeError: Cannot read property 'undefined' of undefined错误核心是MenuCard.js中直接访问了可能不存在的嵌套属性，触发了空值读取报错：

• 代码直接写了data[cardIndex].map，只要data未正常传入、cardIndex为undefined、或者data对应索引下无值，都会导致读取undefined的属性触发报错
• 另外检查到你makeStyles中的媒体查询语法存在笔误，少了闭合括号会导致移动端样式不生效

修复方案 #

1. 给MenuCard增加空值兜底 #

将MenuCard.js中的遍历逻辑替换为以下代码，用可选链操作符避免空值报错：

{data?.[cardIndex]?.map(item => (
  <Card className={classes.root}>
    {/* 原有卡片内容保持不变 */}
  </Card>
))}

如果项目不支持可选链，也可以用逻辑与做判断：

{data && data[cardIndex] && data[cardIndex].map(item => (
  {/* 原有卡片内容保持不变 */}
))}

2. 修正样式语法错误 #

把makeStyles里的媒体查询代码修正为：

["@media (max-width: 460px)"]:{
    maxWidth: "150px",
    maxHeight: "250px",
}

3. 检查参数传递链路 #

你在MenuPage.js中是把数据传给了MobileFoodMenu组件，需要确认该组件内部是否正确给MenuCard传递了data和cardIndex参数：

• 确认MobileFoodMenu接收的menuIndex是否正确传给了MenuCard的cardIndex属性
• 确认MenuData的结构和长度和你传递的索引匹配，不会出现索引越界的情况

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