0

我正在使用 React 和 Contentful 来构建一个应用程序，它使用 GraphQL 进行数据查询，并且我试图在由 slug 创建的“发布”样式页面上检索一个数组。我能够提取静态数据，但我需要能够显示来自几个不同数组的内容，但我发现遇到了路由或解析问题。

我在下面创建了 GraphQL 查询：

export const pageQuery = graphql`
query CareerPageQuery($slug: String!) {
contentfulSite(id: { eq: "c898f54a-af7b-5e84-acd2-4a5ff6b0d086" }) {
  siteTitle
}
contentfulCareer(slug: { eq: $slug }) {
  title
  slug
  description
  thePerson {
    info {
      info
    }
  }
  theJob {
    info {
      info
    }
  }
  theExperience {
    info {
      info
    }
  }
  theRewards {
    info {
      info
    }
  }
  progression {
    progression
  }
  toApply {
    toApply
  }
}

} `

然后我创建变量，以便能够访问静态数据，例如标题和描述：

const career = get(this.props, 'data.contentfulCareer')

这使我可以像这样获取标题，{career.title}但是当我尝试通过数组进行映射时，它会引发错误。

ERROR #85911  GRAPHQL

There was a problem parsing "website-name/src/templates/career.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

我通过数组映射如下：

{career.thePerson.map((value) => (
   {value.info.info}
))}

我似乎无法查明语法错误，或者是否存在我没​​有看到的整体错误。我很可能错过了一些东西！

还有一条额外的错误消息说：

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

website-name/src/templates/career.js: Unexpected token, expected "," (128:20)

  126 |             <CareerTitle>The Role:</CareerTitle>
  127 |             {career.thePerson.map((value) => (
> 128 |               {value.info.info}
      |                     ^
  129 |             ))}
  130 |             <CareerTitle>Responsibilities:</CareerTitle>
  131 |             {/*<CareerText dangerouslySetInnerHTML={{ __html: career.responsibilities.responsibilities}} />*/}

File: src/templates/career.js:128:20
4

1 回答 1

0

您的地图返回中有语法错误。不要将它括在大括号中，而是执行类似的操作。

    {career.thePerson.map((value) => value.info.info )}
于 2022-03-05T00:50:35.163 回答