Question

我正在尝试显示JSON文件的结果，并不断出现以下错误，但不确定原因。该查询在GraphiQL中工作正常。

错误： TypeError：无法读取未定义的属性“ id”

有什么想法为什么我会出错？

这是我的代码：

import React from "react"
import { StaticQuery, graphql } from "gatsby"

    const SecondPage = () => (
      <StaticQuery
        query={graphql`
          query StaticDataQuery {
            allStaticdataJson {
              edges {
                node {
                  id
                }
              }
            }
          }
        `}
        render={data => (
          <div>
            <h1>Graphql test:</h1>
            <p>{data.allStaticdataJson.edges.node.id}</p>
          </div>
        )}
      />
    )

    export default SecondPage

Answer 1

好像您期望allStaticdataJson返回一个边数组。如果是这种情况，您需要遍历它们以访问每个节点的ID。

import React from "react"
import { StaticQuery, graphql } from "gatsby"

    const SecondPage = () => (
      <StaticQuery
        query={graphql`
          query StaticDataQuery {
            allStaticdataJson {
              edges {
                node {
                  id
                }
              }
            }
          }
        `}
        render={data => (
          <div>
            <h1>Graphql test:</h1>
            {data.allStaticdataJson.edges.map(edge => {
              <p>{edge.node.id}</p>
            })}
          </div>
        )}
      />
    )

    export default SecondPage

Gatsby TypeError-无法读取未定义的属性“ id”

1 个答案: