Javascript 存储在动态对象中的JSX映射数组（Next.js）

我是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'
    }
  ]
}

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

阅读：
第一册

阅读：
第二册

阅读：
第三册
第四册

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

下面是我尝试使用嵌套的

.map

函数呈现这些数据的过程：

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

{Object.keys（myBooks.map）（类别=>{
{类别}
category.map（book=>(
{书名}

))
})}

我的理由是：

.map

无法在对象上使用，因此我首先选择对象的键，这就是我称之为

类别的键（reading、toRead、read）

显示类别后，向下遍历并列出与该类别关联的每本书

我收到的错误：
TypeError:category.map不是函数

---

表明category不是数组，或者不存在。任何帮助都将不胜感激

问题是类别变量将是每个键，这是一个字符串。您应该将category.map更改为

myBooks[category].map（）

您可能希望使用，这将允许您访问每个元素的键和值

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

{Object.entries（myBooks.map）（[category，books]）=>(
{类别}
{books.map（（book）=>(
{书名}

))}
))}

第一个映射中的函数必须只返回一个JSX元素
类别是关键，因此要获得价值，请使用：myBooks[category]
category.map（（book）=>{book.title}
）
是一个js语句，它必须介于{}之间，并删除末尾的分号
{Object.keys（myBooks）.map（（类别）=>(
{类别}
{myBooks[category].map（（book）=>(
{书名}

))}
))}
category变量将是一个字符串-
reading、toRead和read
。
{Object.keys(myBooks).forEach(category => {
    <h3>{category}</h3>
    {myBooks[category].forEach(book => (
        <p>{book.title}</p>
    ))}
})}

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

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