javascript - react / Gatsby ；无法读取 null 的属性 'map'

Question

我在 frontmatter 中有数组数据:

tools:
  - name: Hammer
    text: Use a wooden hammer
  - name: Glue
    text: PVA glue works best for this application
  - name: Paint
    text: Choose your favourite colour

我可以毫无困难地在我的帖子模板中映射它，假设我想获取每个工具的名称:

{post.frontmatter.tools.map(item => (
  <span key={item.name}>{item.name}</span>
))}

我将此数组传递给我的 SEO 组件，如下所示:

<SEO tools={post.frontmatter.tools} />

然后在我的 SEO 组件中，我可以访问其中的所有内容，这是我组件中的内容，但是 map 功能在这里不起作用，我不确定为什么？

import React from "react"
import Helmet from "react-helmet"

const SEO = ({
  type,
  tools,
}) => {

  const seo = {
    type: type,
    howToTools: tools,
  }

  let schemaTools = seo.howToTools
  var schemaToolsWithType = schemaTools.map(function(item) {
    item.@type = "HowToTool"
    return item
  })

  console.log(newArray)

  const schemaType = seo.type

  let schemaHowTo = null

  if (schemaType === "howto") {
    schemaHowTo = {
      /* HowTo Schema */
      "@context": "http://schema.org",
      "@type": "HowTo",

      tool: schemaToolsWithType,

    }
  }

  let schemaArticle = null

  if (schemaType === "article") {
    schemaArticle = {
      {/* Article schema here */}
    }
  }

  return (
    <>
      <Helmet>
        {/* Insert schema.org data conditionally (HowTo/Article)*/}
        {schemaType === "howto" && (
          <script type="application/ld+json">
            {JSON.stringify(schemaHowTo)}
          </script>
        )}
        {schemaType === "article" && (
          <script type="application/ld+json">
            {JSON.stringify(schemaArticle)}
          </script>
        )}
      </Helmet>
    </>
  )
}

export default SEO

我想要实现的是从前面获取数组数据，并向数组中的每个对象添加架构类型属性，因此最终结果将是:

[
    {
      "@type": "HowToTool",
      "name": "Hammer",
      "text: "Use a wooden hammer"
    },
    {
      "@type": "HowToTool",
      "name": "Glue",
      "text: "PVA glue works best for this application"
    },
    {
      "@type": "HowToTool",
      "name": "Hammer",
      "text: "Choose your favourite colour"
    }
  ]

更新:

我可以使用以下方法将有效的 JSON+ld 打印到我的头上，但我仍然在浏览器中遇到令人讨厌的无法读取 null 的属性“map”。

  let schemaHowToTools = []

  seo.howToTools.map(tool =>
    schemaHowToTools.push({
      "@type": "HowToTool",
      name: tool.name,
      text: tool.text,
    })
  )

更新#2(工作解决方案)

感谢@gazdagergo 的建议，这是适合我的情况的解决方案。可选链接看起来更好，但此时需要 extra plugin .

  const schemaTools =
    seo.howToTools &&
    seo.howToTools.map &&
    seo.howToTools.map(tool => {
      const schemaTypeTool = {
        "@type": "HowToTool",
      }
      return Object.assign(schemaTypeTool, tool)
    })

Answer 1

我建议使用安全导航来避免此类错误。例如:

const result = tools && tools.map && tools.map(item => { return // etc })

只有当tools确实是一个数组时，这才会映射到tools上。

或者更好的是，您现在可以使用 optional chaining in JS:

const result = tools?.map(item => { return // etc })