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

Posted 2023-03-08

【中文标题】如何使用 GatsbyJS 在项目列表中获取数组值？

【英文标题】：How can I fetch arrays values in a list of items using GatsbyJS?

【发布时间】：2020-07-22 14:44:46

【问题描述】：

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

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

<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.

【问题讨论】：

正如您在操场上看到的（括号类型）frontmatter 是一个对象，其中包含您可以迭代的 categories 和 tags 数组。 frontmatter.tags.map((tag) => <Tag name=tag key=tag />)

感谢您的评论@xadm。我看到了。正如罗宾的回应一样，它不起作用。我现在正在阅读它。

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

【讨论】：

感谢您的回答，罗宾！它没有用。我在浏览器中收到这条消息，告诉元素应该是字符串或类/函数，但它却没有定义。我想我以前也尝试过同样的事情。忘了提。不知道出了什么问题。将阅读您发送的链接。谢谢！

让我尝试在本地重现:)

当然！谢谢。您可以访问博文@sample

这是一个不同的错误，因为您正在尝试从 react 导入 Gatsby Link 组件。通过切换到import Link from "gatsby" 进行修复（请参阅this line）。我认为我的回答解决了您问题中描述的问题:)

结束语：在我的回答中，我链接到了the .map docs on MDN，但如果您想要一些更易于理解的解释和示例，我强烈推荐Tania Rascia's article about it。学习愉快！