GatsbyJS：从 ACF 转发器字段创建 json/structured 数据

Question

我正在尝试创建一个包含结构化数据的 ACF Repeater 字段。然后我想在我的 GatsbyJS 站点中输出该字段。对于此任务，我使用的是 React 头盔。

我的代码：

      <Helmet>
        {wpPage.schemaMarkup.schemarepeater.map(
          (schemaJson, id) =>
            schemaJson !== null && (
              <script type="application/ld+json" key={id}>
                {JSON.stringify(schemaJson)}
              </script>
            )
        )}
      </Helmet>

我在模板文件中的 GraphQL 架构：

wpPage(id: { eq: $id }) {
      __typename
      id
      uri
      content
      title
      schemaMarkup {
        schemarepeater {
          schemaJson
        }
      }
    }

代码还算有效。唯一的问题是，如果页面在我的 ACF Repeater 字段中不包含值（并非所有页面都应该有值），它 returns 错误：WebpackError: TypeError: Cannot read property 'map' of null

我试过与 !== null 进行比较，但似乎没有解决问题。

Answer 1

您需要先检查字段的可用性：

  <Helmet>
    {wpPage.schemaMarkup.schemarepeater && wpPage.schemaMarkup.schemarepeater.map(
      (schemaJson, id) =>
        schemaJson !== null && (
          <script type="application/ld+json" key={id}>
            {JSON.stringify(schemaJson)}
          </script>
        )
    )}
  </Helmet>

GatsbyJS：从 ACF 转发器字段创建 json/structured 数据

GatsbyJS: create json/structured data from ACF repeater field

reactjs

graphql

gatsby