React MUI传数组渲染菜单链接报错items.map is not a function

控制台抛出items.map is not a function和MUI组件本身无关，核心是数组定义的语法写错了：
你当前写的const [items] = ([{name:'John', href:'xxx'}])使用了数组解构赋值语法，最终items拿到的是数组内的第一个对象，而非整个数组，对象类型没有map方法，直接调用就会触发报错。

1. 修正数组定义 #

如果菜单是不需要动态修改的静态内容，直接定义普通数组常量即可，不要加解构用的方括号：

// 静态菜单正确写法
const items = [
  {
    name: 'John',
    href: '/test-page' // 替换为你自己的页面路径
  }
];

如果后续需要动态增删改菜单项，用React useState定义响应式状态：

// 动态菜单正确写法
const [items, setItems] = React.useState([
  {
    name: 'John',
    href: '/test-page'
  }
]);

2. 修正列表渲染的key值 #

你移动端菜单循环写的key={item}是错误写法，React要求key必须是字符串/数字类型的唯一标识，直接传对象会触发渲染警告，改成和桌面端一致，用唯一的name字段即可：

<List>
  {items.map(item => (
    <ListItem key={item.name} disablePadding>
      <ListItemButton component="a" href={item.href} sx={{ textAlign: 'center' }}>
          <ListItemText primary={item.name} />
      </ListItemButton>
    </ListItem>
  ))}
</List>

3. 补全桌面端菜单的跳转属性 #

你当前桌面端渲染的Button组件没有绑定href，无法实现跳转，补上对应属性即可：

<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
  {items.map(item => (
    <Button key={item.name} href={item.href} sx={{ color: '#fff' }}>
      {item.name}
    </Button>
  ))}
</Box>

4. 补全缺失的宽度常量 #

代码里Drawer的样式用到了drawerWidth变量，如果没有提前声明会触发未定义报错，直接给抽屉设置固定宽度即可，常用值为240px：

sx={{
  display: { xs: 'block', sm: 'none' },
  '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
}}

通过map循环向MUI组件注入数组渲染的逻辑和写原生语义化HTML没有区别，只要保证调用map的变量是数组类型，将对应字段正确传给组件的props属性即可，组件本身不会对循环渲染做特殊限制。

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