我想列出所有唯一节点值并将它们呈现在我的页面上。这就是我所拥有的:
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
进行渲染?我认为这就是我出错的地方。
答案 0 :(得分: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>