TypeError：无法读取未定义的属性“未格式化”

Question

我有一个GatsbyJS项目，我在其中使用StaticQuery查询JSON文件。我可能查询的数据不正确，但是与其他React项目相比，我还没有这个问题。我认为结构是相同的。有人可以帮我指出正确的方向吗？

错误：

控制台/检查中的数据结构：

我的代码：

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

export default () => (
  <StaticQuery
    query={graphql`
      query {
        allDataJson {
          edges {
            node {
              id
              authorship_date {
                unformatted
              }
            }
          }
        }
      }
    `}
    render={data => (
      <header>
        {console.log(data)}
        {console.log(data.authorship_date.unformatted)}
        <p>{data.authorship_date.unformatted} test</p>
      </header>
    )}
  />
)

Answer 1

正如您在console.log中看到的那样，数据没有authorship_date属性，您应该尝试data.allDataJson.edges[0].node.authorship_date.unformatted

要使访问（微型）的痛苦减轻，可以使用别名和新的快捷方式（我认为仅在gatsby ^ 2.2中可用）来修改查询。例如：

  query {
    json: allDataJson {
      nodes {
        id
        authorship_date {
          unformatted
        }
      }
    }
  }

这将从

减少

data.allDataJson.edges[0].node.authorship_date

到

data.json.nodes[0].authorship_date

当然，首先将节点分配给变量始终是个好主意，这样您就不必每次都编写整个内容。