存储在动态对象中的 JSX 映射数组 (Next.js)答案

【问题标题】：JSX mapping arrays stored inside a dynamic object (Next.js)存储在动态对象中的 JSX 映射数组 (Next.js)
【发布时间】：2021-04-04 18:45:08
【问题描述】：

我是 React/Next 的新手，在显示 API 返回的数据时遇到了一些困难。

这是数据的结构：

myBooks = {
  reading: [
    {
      title: 'book1',
      cover: 'cover1.jpg'
    }
  ],
  toRead: [
    {
      title: 'book2',
      cover: 'cover2.jpg'
    }
  ],
  read: [
    {
      title: 'book3',
      cover: 'cover3.jpg'
    },
    {
      title: 'book4',
      cover: 'cover4.jpg'
    }
  ]
}

这就是我希望数据显示的方式：

阅读：
书1

阅读：
书2

阅读：
书3
书4

我希望这是动态的，所以如果我添加另一个类别，例如“收藏夹”，这些书籍会显示在它们自己的部分中，并带有相关的标题。

这是我尝试使用嵌套的.map 函数呈现这些数据：

{Object.keys(myBooks).map(category => {
    <h3>{category}</h3>
    category.map(book => (
        <p>{book.title}</p>
    ))
})}

我的理由：

.map 不能在对象上使用，所以我首先选择对象的键，这就是我所说的 category（读取、toRead、读取）
显示类别后，向下遍历并列出与该类别关联的每本书

我收到的错误：
TypeError: category.map is not a function

提示category不是数组，或者不存在。任何帮助将不胜感激！

【问题讨论】：

类别变量将是一个字符串 - reading, toRead, and read。

标签： javascript reactjs typescript next.js jsx

【解决方案1】：

问题是类别变量将是每个键，它是一个字符串。您应该将 category.map 更改为 myBooks[category].map()

{Object.keys(myBooks).map(category => {
    <h3>{category}</h3>
    {myBooks[category].map(book => (
        <p>{book.title}</p>
    ))}
})}

此外，在这种情况下，您不想使用.map()。 .map() 用于修改数组中的元素 - 在这种情况下，您只想遍历它们。请改用.forEach()

{Object.keys(myBooks).forEach(category => {
    <h3>{category}</h3>
    {myBooks[category].forEach(book => (
        <p>{book.title}</p>
    ))}
})}

【讨论】：

【解决方案2】：

第一个映射中的函数，必须只返回一个 JSX 元素。
category 是关键，所以要获取值使用：myBooks[category]
category.map((book) => <p>{book.title}</p>);是js语句，必须在{}之间，并去掉末尾的分号。

{Object.keys(myBooks).map((category) => (
        <>
          <h3>{category}</h3>
          {myBooks[category].map((book) => (
            <p>{book.title}</p>
          ))}
        </>
      ))}

【讨论】：

【解决方案3】：

您可能想改用Object.entries，这将使您能够访问每个元素的键和值。

{Object.entries(myBooks).map(([category, books]) => (
    <>
        <h3>{category}</h3>
        {books.map((book) => (
            <p>{book.title}</p>
        ))}
    </>
))}

【讨论】：