反应/盖茨比；无法读取null的属性“map”

Question

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模板中映射，没有麻烦，比如我想获得每个工具的名称：

js prettyprint-override">{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"
    }
  ]

  let schemaHowToTools = []

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

  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 })

只有当工具实际上是一个数组时，这才会在工具上映射。

甚至更好的是，您现在可以在JS中使用可选链接：

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