如何在React JS和MUI组件中将二维数组映射为卡片矩阵？

你的问题出在没处理二维数组的嵌套结构：当前代码只遍历了外层数组，每次拿到的obj其实是内层的子数组（比如[obj1,obj2,obj3]），子数组本身没有id和text属性，自然无法正确渲染卡片。另外还有两个细节错误：外层<Grid>缺少container属性（Material UI Grid布局的必要配置），组件名assetCard没有首字母大写（React组件必须大写开头）。

修正后的代码如下：

export default function Content() {
  return (
    <Grid container>
      {DUMMY_DATA.map((row, rowIndex) => (
        <>
          {row.map((obj) => (
            <Grid item sm={4} sx={{ m: 1 }} key={obj.id}>
              <AssetCard 
                id={obj.id}
                name={obj.text}
              />
            </Grid>
          ))}
        </>
      ))}
    </Grid>
  );
}

关键修正点： #

• 外层<Grid>添加container属性：启用Material UI的网格布局逻辑，让子元素按列宽规则排列。
• 嵌套两层map：外层遍历二维数组的每一行，内层遍历每行中的单个对象，确保每个对象都能生成对应的卡片。
• 组件名改为AssetCard：React要求组件名必须首字母大写，否则会被识别为原生HTML标签。
• 合理设置key：内层用对象的唯一id，外层用行索引rowIndex（如果每行没有专属唯一标识的话），符合React的列表渲染规范。

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