React MUI场景如何简洁渲染数组内组件 替代逐索引调用写法

你当前的写法存在两处不必要的冗余：手动写for循环提前push生成组件数组、硬编码0-5的索引逐个渲染元素，不仅写法啰嗦，后续如果数组长度调整，还要手动改渲染部分的代码，维护性很差。React生态里渲染同结构列表的标准方式是用Array.prototype.map直接遍历数据源生成组件，完全不需要中间数组和硬编码索引。

兼容现有效果的最简改法 #

直接删掉提前生成targetTypeData的循环逻辑，在JSX渲染位置直接遍历即可：

<AccordionDetails>
  <Typography>
    {targetTypes.map((type, index) => (
      <Typography
        key={`target-${index}`}
        sx={{ fontSize: 14, display: 'block' }}
        color="white"
      >
        {`${type.toString()} : ${targetNumberData[index].toString()}`}
      </Typography>
    ))}
  </Typography>
</AccordionDetails>

这里给内层Typography加display: 'block'是为了保证每个条目单独占一行，和你之前逐个写元素的展示效果完全一致。

更符合MUI规范的排版写法 #

如果需要调整条目间距、对齐方式，更推荐用MUI自带的Stack组件做布局容器，不需要把多个Typography嵌套在同一个Typography里，语义和样式可控性更好：

// 记得先从@mui/material引入Stack
<AccordionDetails>
  <Stack spacing={0.5}> {/* spacing值控制行间距，可按需调整 */}
    {targetTypes.map((type, index) => (
      <Typography
        key={`target-${index}`}
        sx={{ fontSize: 14 }}
        color="white"
      >
        {`${type.toString()} : ${targetNumberData[index].toString()}`}
      </Typography>
    ))}
  </Stack>
</AccordionDetails>

这种写法的好处 #

• 省去了提前声明空数组、循环push的冗余逻辑，代码量减少近一半
• 不需要硬编码数组长度，后续不管targetTypes长度怎么变，渲染逻辑都不用改，自动适配
• 给每个列表项加了key属性，符合React列表渲染的规范要求，避免diff过程中出现渲染异常
• 排版逻辑更独立，后续调整样式、间距、交互都更方便

额外建议：如果targetTypes和targetNumberData是一一对应的关联数据，最好提前把两个数组合并成一个对象数组再遍历，比如：

const targetList = targetTypes.map((type, idx) => ({
  name: type,
  count: targetNumberData[idx]
}))

遍历的时候直接取item.name和item.count即可，不用靠索引关联两个独立数组，逻辑更健壮，不容易出下标错位的问题。

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