Gatsby：如何列出所有节点？答案

【问题标题】：Gatsby: How Do I Make a List of All Nodes?Gatsby：如何列出所有节点？
【发布时间】：2021-06-22 18:17:47
【问题描述】：

我想列出所有唯一节点值并将它们呈现在我的页面上。这就是我所拥有的：

import { graphql, Link } from "gatsby"
import React from "react"
import Layout from "../layouts/Layout"
const _ = require("lodash")

export default props => {
    const majorNodes = props.item.edges.node
    let majors = []
    let major = []
    majorNodes.map(majorNode => majors.push(majorNode.major))
    majors = majors.concat(major)
    majors = _.uniq(majors)
 
  return (
    <Layout>
      
<div>{majors}</div>
    </Layout>
  )
}

export const query = graphql`
  query majors {
    item: allContentfulPortfolio {
      edges {
          node {
              major
          }
      }
    }
  }
`

但是，这给了我以下错误：

TypeError: Cannot read property 'edges' of undefined
_default
D:/Gatsby/archives/src/pages/majors.js:7
   4 | const _ = require("lodash")
   5 | 
   6 | export default props => {
>  7 |     const majorNodes = props.item.edges.node
   8 |     let majors = []
   9 |     let major = []
  10 |     majorNodes.map(majorNode => majors.push(majorNode.major))

我该如何解决这个问题？此外，这是我应该如何传递数组majors 进行渲染吗？我认为这就是我的错误所在。

【问题讨论】：

数据作为道具传递......遵循一些 gatsby [和原始反应 FC] 教程......渲染与转换，2 个问题混合
@xadm，我已经更新了我的问题，你能看一下吗？
尝试从 graphql 源渲染任何东西 - 遵循文档/教程！ ...稍后转换

标签： graphql gatsby

【解决方案1】：

您的节点存储在props.data 中，所以：

   const majorNodes = props.item.edges.node

应该变成：

 const majorNodes = props.data.item.edges.node

另外，这是我应该如何传递数组专业渲染？我认为这就是我的错误所在。

majors 是一个数组，所以直接打印为：

<div>{majors}</div>

不会工作。

你应该循环遍历每个元素，例如：

<div>{majors.map(major => <p> Major element is {major}</p> )}</div>

【讨论】：

谢谢！我曾假设 props 是 data 的名称！一个相当愚蠢的错误。你的回答很有帮助！再次感谢您。