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

Posted 2023-02-22

【中文标题】存储在动态对象中的 JSX 映射数组 (Next.js)

【英文标题】：JSX mapping arrays stored inside a dynamic object (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。

【参考方案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>
        ))
    </>
))