Reactjs 盖茨比类型错误-无法读取属性'；id'；未定义的

我试图显示一个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

从“React”导入React
从“盖茨比”导入{StaticQuery，graphql}
常量第二页=（）=>(
(
Graphql测试：
{data.allStaticdataJson.edges.node.id}

)}
/>
)
导出默认第二页

看起来您希望

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

从“React”导入React
从“盖茨比”导入{StaticQuery，graphql}
常量第二页=（）=>(
(
Graphql测试：
{data.allStaticdataJson.edges.map（edge=>{
{edge.node.id}

})}
)}
/>
)
导出默认第二页

看起来您希望

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

从“React”导入React
从“盖茨比”导入{StaticQuery，graphql}
常量第二页=（）=>(
(
Graphql测试：
{data.allStaticdataJson.edges.map（edge=>{
{edge.node.id}

})}
)}
/>
)
导出默认第二页