我有包含对象和数组的数据集:
<块引用>{React 基本结构:数组(2)}
或
<块引用>{"React 基本结构": [{"Topic": "send_AAFBLrk_f0NHXdU.mp4"}, {"Topic": "send_zHeTppE.mp4"}]}
我想要一个下拉列表,上面有一个课程,下面会显示主题
喜欢: 第 1 课
<块引用>主题 2
主题 3
主题 3
第 2 课
<块引用>主题 10
主题 20
主题 30
我想撒谎,但地图中不允许使用地图:
{Object.entries(LessonList).map(([key, value]) => (
<ListItem button className={classes.LessonTitle} key={key} >
<ListItemIcon ><FiberManualRecordOutlinedIcon /></ListItemIcon>
<ListItemText primary={key} />
</ListItem>
{
value.map((v) => (
<ListItem button className={classes.LessonTopics} key='Django Learning'>
<ListItemIcon ><FiberManualRecordIcon /></ListItemIcon>
<ListItemText primary='Django Learning' />
</ListItem>
))
}
))}
答案 0 :(得分:1)
假设我们有一个你想要的数组。
然后我们首先绘制出包含“标题”和“主题”的 lessons
。
此后,我们访问 topics
数组并将其映射到父 map
内。
const lessons = [
{
title: "Lesson 1",
topics: [
"Topic 1",
"Topic 2",
"Topic 3"
]
},
{
title: "Lesson 2",
topics: [
"Topic 1",
"Topic 2",
"Topic 3"
]
}
]
//..
<div className="App">
{lessons.map((lesson) => (
<div>
<h1>{lesson.title}</h1>
{lesson.topics.map((topic: string) => (
<p>{topic}</p>
))}
</div>
))}
</div>