返回for循环中每个元素的超文本标记语言

Question

我在stackoverflow上看了其他一些答案，但没有找到一个回答我问题的答案。

我有一个变量工具快捷方式，它是由对象数组组成的对象：

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>