盖茨比：我如何制作所有节点的列表？

Question

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

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 进行渲染吗？我认为那是我出错的地方。

Answer 1

您的节点存储在 props.data 中，因此：

   const majorNodes = props.item.edges.node

应该变成：

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

Additionally, is this how I should pass the array majors for rendering? I think that is where I am going wrong.

majors 是一个数组，因此直接将其打印为：

<div>{majors}</div>

不行。

您应该使用类似以下内容遍历每个元素：

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

盖茨比：我如何制作所有节点的列表？

Gatsby: How Do I Make a List of All Nodes?

graphql

gatsby