javascript - 我想映射字典然后映射字典键中的值？

Question

我有其中包含对象和数组的数据集：

{React 基本结构：数组（2）}

或者

{“React 基本结构”：[{“主题”：“send_AAFBLrk_f0NHXdU.mp4”}，{“主题”：“send_zHeTppE.mp4”}]}

我想要一个下拉列表，顶部有一个课程，主题将显示，贝娄

喜欢：第 1 课

话题二

话题 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>
                        ))
                    }
                ))}

标签： javascriptarraysreactjsobjectmaterial-ui

Answer 1

假设我们有一个你想要的数组。

然后我们首先映射出lessons包含'title'和'topics'的内容。此后，我们访问该topics数组并将其映射到 parentmap中。

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>