如何使用 GatsbyJS 在项目列表中获取数组值？

Question

对于本博客中的每篇文章，都有一个类别和标签数组，应作为元信息显示给读者。事情是我没有正确处理这个问题。

我一直在尝试使用以下代码映射这些数组：

<ul>
  {frontmatter.map(({ categories }, i )=> (
     <li>
        <Link 
          className={`
            (...tailwind classes...)
          `} 
           key={i} 
           to={categories}>
          {categories}
        </Link>
      </li>
  ))}
</ul>

虽然终端向我显示了这条成功消息...

...浏览器告诉我TypeError: frontmatter.map is not a function。

我猜我误解了 map 函数，但读到它我无法真正管理它。

查询是这样的：

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      fields {
        slug
      }
      frontmatter {
        date(formatString: "DD MMMM YYYY")
        path
                title
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
                type
                categories
                tags                
      }
    }
  }
`

它按预期返回：

此外，每个类别都有一个页面显示其帖子。他们的蛞蝓是/categorias/[category-name]。因此，在上面用于映射它们的代码中，我可能需要设置 Link to="/categorias/${categories}" 或其他东西。不知道是什么，但由于我什至没有得到一个简单名称的列表，这是另一种问题。任何帮助都感激不尽。

This is the blogPost.js in its full content.

Answer 1

您的查询响应具有以下形状：

"data": {
  "markdownRemark": {
    // ...
    "frontmatter": {
      "date": "...",
      "path": "...",
      "categories": [
        "cat-a",
        "cat-b"
      ]
    }
  }
}

你不能映射frontmatter，因为它不是一个迭代器。更多on MDN。

你想要的是这样的：（在类别数组上映射）

<ul>
  {frontmatter.categories.map((category, i) => (
     <li>
        <Link 
          className={`
            (...tailwind classes...)
          `} 
           key={i} 
           to={category}>
          {category}
        </Link>
      </li>
  ))}
</ul>