Javascript Gatsby/React映射不是一个函数（带有示例沙盒）

我正在使用Gatsby/React页面，并尝试呈现动态导航。我还没有反应过来，想弄清楚为什么我的

数组

不能用

.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} />
            </nav>
            <main>{children}</main>
        </>
      )
    }

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

const布局=（{children}）=>{
常数navItems=[
{标题：“英雄”，url:#sec1，类：“行动链接”，子视频：[]}，
{标题：“关于”，url:#sec2，类：，子AV:[]}，
{标题：“简历”，url:#sec3，类别：，子AV:[]}，
{标题：“项目”，url:#sec5，类：，子AV:[]}，
{标题：“客户端”，url:#sec6，类：，子AV:[]
]
返回(
导航到这里
{儿童}
)
}

navigation.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

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

从“/navigation item”导入导航项
常量导航=导航项=>{
console.log（navItems）
返回(
此处应显示NavItems：
{navItems.map（项=>(
))}
)
}
导出默认导航

导航-item.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

从“React”导入React
常量导航项=（项，索引）=>{
返回(


)
}
导出默认导航项

---

如果您有任何建议，我们将不胜感激，谢谢

导航组件中的
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} />
            </nav>
            <main>{children}</main>
        </>
      )
    }

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

const布局=（{children}）=>{
常数navItems=[
{标题：“英雄”，url:#sec1，类：“行动链接”，子视频：[]}，
{标题：“关于”，url:#sec2，类：，子AV:[]}，
{标题：“简历”，url:#sec3，类别：，子AV:[]}，
{标题：“项目”，url:#sec5，类：，子AV:[]}，
{标题：“客户端”，url:#sec6，类：，子AV:[]
]
返回(
导航到这里
{儿童}
)
}

navigation.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

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

从“/navigation item”导入导航项
常量导航=（{navItems}）=>{
console.log（navItems）
返回(
此处应显示NavItems：
{navItems.map（项=>(
))}
)
}
导出默认导航
aah，太好了！我什么都试过了，但成功了，谢谢！