Gatsby / React map 不是函数（带有示例沙箱）

Question

我正在使用 Gatsby / React 页面，并尝试呈现动态导航。我对 React 还很陌生，想弄清楚为什么我的 Array 不能用 .map 进行迭代。

这似乎很明显，但是....

https://codesandbox.io/s/keen-platform-gy97p?file=/src/components/layout.js:891-923

layout.js

    const Layout = ({ children }) => {
      const navItems = [
        { title: "Hero", url: "#sec1", classes: "act-link", subnav: [] },
        { title: "About", url: "#sec2", classes: "", subnav: [] },
        { title: "Resume", url: "#sec3", classes: "", subnav: [] },
        { title: "Projects", url: "#sec5", classes: "", subnav: [] },
        { title: "Clients", url: "#sec6", classes: "", subnav: [] }
      ]
    
     return (
        <>
       
            <h1>Navigation goes here</h1>
            <nav>
              <Navigation {...navItems} />
            </nav>
            <main>{children}</main>
        </>
      )
    }

导航.js

    import NavigationItem from "./navigation-item"
    
    const Navigation = navItems => {
      console.log(navItems)
      return (
        <nav>
          Here should appear the NavItems:
          {navItems.map(item => (
            <NavigationItem {...item} />
          ))}
        </nav>
      )
    }

export default Navigation

导航项.js

    import React from "react"
    const NavigationItem = (item, index) => {
      return (
        <li key={index}>
          <a className="scroll-link" href={item.link}>
            {item.title}
          </a>
        </li>
      )
    }
    
    export default NavigationItem

任何建议都将不胜感激，谢谢！

Answer 1

Navigation 组件中的navItems 是一个对象而不是数组，并且对象没有.map 方法。这是潜在的解决方法：

layout.js

const Layout = ({ children }) => {
  const navItems = [
    { title: "Hero", url: "#sec1", classes: "act-link", subnav: [] },
    { title: "About", url: "#sec2", classes: "", subnav: [] },
    { title: "Resume", url: "#sec3", classes: "", subnav: [] },
    { title: "Projects", url: "#sec5", classes: "", subnav: [] },
    { title: "Clients", url: "#sec6", classes: "", subnav: [] }
  ]

 return (
    <>
   
        <h1>Navigation goes here</h1>
        <nav>
          <Navigation navItems={navItems} />
        </nav>
        <main>{children}</main>
    </>
  )
}

导航.js

import NavigationItem from "./navigation-item"

const Navigation = ({ navItems }) => {
  console.log(navItems)
  return (
    <nav>
      Here should appear the NavItems:
      {navItems.map(item => (
        <NavigationItem {...item} />
      ))}
    </nav>
  )
    }

export default Navigation