JAVASCRIPT/REACT: возврат HTML для каждого элемента в цикле for
Я просмотрел некоторые другие ответы на stackoverflow и не смог найти тот, который отвечает на мой вопрос.
У меня есть переменная toolShortcuts, которая представляет собой объект, состоящий из массивов объектов:
toolShortcuts = {
1: [{key: "s", description: "click this to scale"}],
2: [{key: "delete", description: "click this to delete"}, {key: "backspace",description: "click this to delete"}]
}
Я пытаюсь вернуть некоторый HTML для каждого элемента в объекте (3 элемента в указанном выше объекте). Поскольку я использую цикл for с оператором return, отображаются только первые элементы каждого массива (2 из 3 элементов). Как я могу отобразить все три элемента?
<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>
[key: "s", description: "click this to scale"] наверное должно быть [{key: "s", description: "click this to scale"}]кроме того, return внутри for просто выпадает из цикла. Вы уже используете map чуть выше, вы можете снова использовать карту, и это сработает. Может быть, поставить flatMap там.
Отвечает ли это на ваш вопрос? Как использовать циклы for с реакцией?
@EmileBergeron спасибо за помощь! Не могли бы вы подтвердить, что я правильно понимаю ваше предложение. Вот что я реализовал сейчас: shortcuts.map((shortcut) => { return ( <Row key = {shortcut.key}> <$DescriptionCol>{shortcut.description}</$DescriptionCol> <$ButtonCol lg = "3">{shortcut.key}</$ButtonCol></Row> ) })
Вам нужно будет использовать flatMap вместо первого map, если вы собираетесь вложить оба цикла. В противном случае, да, это то, что я имел в виду.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
Пожалуйста, отметьте шаблон или фреймворк, который вы используете — похоже на React