javascript - Gatsby / React map 不是函数(带有示例沙箱)
问题描述
我正在使用 Gatsby / React 页面,并尝试呈现动态导航。我对 React 很陌生,想弄清楚为什么 myArray
不能被迭代.map
。
这似乎很明显,但是......
https://codesandbox.io/s/keen-platform-gy97p?file=/src/components/layout.js:891-923
布局.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
导航-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
任何建议将不胜感激,谢谢!
解决方案
navItems
在您的Navigation
组件中是一个对象而不是一个数组,并且对象没有.map
方法。这是潜在的解决方法:
布局.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
推荐阅读
- rest - 通过 rest 和 ntlm 或类似方法在线访问 sharepoint
- javascript - Javascript > HTML 滚动按钮在页面顶部时不会消失
- vue.js - 如何在手表中调用自定义函数?
- javascript - 如何以编程方式破坏剑道网格?
- c# - 尽管 EditText 的 InputType 是 ClassText,但允许文本输入
- c# - 如何获取当前的测试夹具属性
- reactjs - React MaterialUI v3.7 知道在输入下会出现帮助文本,如何设置高度?
- javascript - 当我使用 .value 获取输入值时,它返回 Undefined
- java - 为任何双精度生成本地化、全精度输出的 MessageFormat 模式是什么
- xamarin - 北欧Dfu库的Xamarin绑定