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

Question

对于此博客中的每个 post，都有一个类别和标签数组，应显示为 reader 的元信息。事情是我没有处理这个权利。

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

<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                
      }
    }
  }
`

它按预期返回：

此外，每个类别都有一个页面显示它的 post。他们的 slug 是 /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>

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

How can I fetch arrays values in a list of items using GatsbyJS?

arrays

reactjs

graphql

gatsby

graphql-js