我想映射字典然后映射字典键中的值?

时间:2021-05-12 11:21:59

标签: javascript arrays reactjs object material-ui

我有包含对象和数组的数据集:

<块引用>

{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>
                        ))
                    }
                ))}

1 个答案:

答案 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>