React:渲染数组中的每个组件

Question

在我的应用程序中，我希望React MUI库组件AccordionDetails显示数组targetTypeData中的每个元素(数组的长度是目前总是6)。阵列中存在Typography组件

我目前的解决方案正确显示数据有局限性，而且不简洁。是否有另一种方式来渲染数组中的每个元素?

var targetTypeData = [];
for(let i=0; i<targetTypes.length;i++){
targetTypeData.push(
<Typography sx={{ fontSize: 14 }} 
color= {"white" } >
{`${targetTypes[i].toString()} : ${targetNumberData[i].toString()}`}
</Typography> 
)
}
//more code
<AccordionDetails>
<Typography>
{targetTypeData[0]}
{targetTypeData[1]}
{targetTypeData[2]}
{targetTypeData[3]}
{targetTypeData[4]}
{targetTypeData[5]}
</Typography>

</AccordionDetails>

Answer 1

(已编辑)试试这个:

var targetTypeData = [];
for(let i=0; i<targetTypes.length;i++){
targetTypeData.push(
`${targetTypes[i].toString()} : ${targetNumberData[i].toString()}` 
)
}
// more code
<AccordionDetails>
{targetTypeData.map((item) => (
<Typography sx={{ fontSize: 14 }} color= {"white"} >
{item}
</Typography> 
))}
</AccordionDetails>