如何在给定数据的 React 组件中使用嵌套 Map答案

【问题标题】：How to use nested Map in React component with the given data如何在给定数据的 React 组件中使用嵌套 Map
【发布时间】：2021-08-02 20:30:36
【问题描述】：

我有来自 API 的数据

[
    {
      title: "Lesson 1",
      topics: [
        "Topic 1",
        "Topic 2",
        "Topic 3"
      ]
    },
    {
      title: "Lesson 2",
      topics: [
        "Topic 1",
        "Topic 2",
        "Topic 3"
      ]
    }

]

我想以嵌套顺序显示课程和相关主题喜欢主题 1 -> 第 1 课 ,2 3 4 我就是这样做的

<List>
                    {LessonList.map(() => (lesson)(
                        <ListItem button className={classes.LessonTitle} key={lesson.title} >
                            <ListItemIcon ><FiberManualRecordOutlinedIcon /></ListItemIcon>
                            <ListItemText primary={lesson.title} />
                        </ListItem>

                        {
                            lesson.topics.map(() => (t) {
                                return (
                                    <ListItem button className={classes.LessonTopics} key='Django Learning'>
                                        <ListItemIcon ><FiberManualRecordIcon /></ListItemIcon>
                                        <ListItemText primary='Django Learning' />
                                    </ListItem>
                                )
                            }
                            )

                        }
                    ))}
</List>

但它的语法错误

【问题讨论】：

我不明白你的要求。如果你想将数组项映射到反应元素，你可以这样做：array.map((item) => { return <ListItem>{item.title}</ListItem>})

标签： javascript reactjs arraylist material-ui

【解决方案1】：

当你有超过 1 个东西从一个 {} 块中出来时，你需要将它们包装在一个 div 或其他东西中，但你可以使用这样的反应片段 >

例如，您的代码可以这样完成：

<List>
  {LessonList.map((lesson) =>
      <>
        <ListItem button className={classes.LessonTitle} key={lesson.title}>
          <ListItemIcon>
            <FiberManualRecordOutlinedIcon />
          </ListItemIcon>
          <ListItemText primary={lesson.title} />
        </ListItem>

        {lesson.topics.map((t) => (
          <ListItem button className={classes.LessonTopics} key='Django Learning'>
            <ListItemIcon>
              <FiberManualRecordIcon />
            </ListItemIcon>
            <ListItemText primary='Django Learning' />
          </ListItem>
        ))}
      </>
  )}
</List>

你看到你的第二张地图也有语法问题，我也修复了这个问题。

【讨论】：

你能解释一下这个语法LessonList.map(() => lesson(...))吗？
它的 prolly 是一个以 jsx 元素作为参数的函数。
我认为课程必须在地图参数中，对吧？ LessonList.map(lesson)=>()

【解决方案2】：

JSX 表达式必须只有一个父级，这就是它显示错误的原因

试试下面的方法：-

      <List>
        {LessonList.map(lesson => (
          <>
            <ListItem button className={classes.LessonTitle} key={lesson.title}>
              <ListItemIcon>
                <FiberManualRecordOutlinedIcon />
              </ListItemIcon>
              <ListItemText primary={lesson.title} />
            </ListItem>
            {lesson.topics.map(topic => {
              return (
                <ListItem
                  button
                  className={classes.LessonTopics}
                  key="Django Learning"
                >
                  <ListItemIcon>
                    <FiberManualRecordIcon />
                  </ListItemIcon>
                  <ListItemText primary={topic} />
                </ListItem>
              );
            })}
          </>
        ))}
      </List>

【讨论】：