JAVASCRIPT/RECT:为for循环中的每个元素返回HTML

Question

我在stackoverflow上查看了一些其他答案，但一直找不到一个能回答我问题的答案。

我有一个可变工具Shortcuts，它是一个由对象数组组成的对象：

toolShortcuts = {
1: [{key: "s", description: "click this to scale"}],
2: [{key: "delete", description: "click this to delete"}, {key: "backspace",description: "click this to delete"}]
}

我试图为对象中的每个元素(上面对象中的3个元素(返回一些HTML。由于我使用带有return语句的for循环，因此只显示每个数组的第一个元素(3个元素中的2个(。如何显示这三个元素？

<Container>
{ Object.values(toolShortcuts).map((shortcuts) => {
for (let i in shortcuts) {
return (
<Row>
<$DescriptionCol>{shortcuts[i].description}</$DescriptionCol>
<$ButtonCol lg="3">{shortcuts[i].key}</$ButtonCol>
</Row>
)
}
})
}
</Container>

Answer 1

<Container>
{Object.values(toolShortcuts).map((shortcuts, indexTool) => (
<React.Fragment key={indexTool}>
{shortcuts.map((shortcut) => (
<Row key={shortcut.key}>
<$DescriptionCol>{shortcut.description}</$DescriptionCol>
<$ButtonCol lg="3">{shortcut.key}</$ButtonCol>
</Row>        
))}
</React.Fragment>
}
</Container>