子菜单项Gatsby+WordPress无头CMS

Question

我很难在盖茨比网站上为我的WordPress菜单创建子菜单项。它一直给我错误："TypeError:无法读取未定义的属性'map'"。

我一直在研究，试图为我的无头WordPress安装上的子菜单项找到一个解决方案。到目前为止，我已经找到了一个旧的So帖子，但当我测试时，解决方案似乎不起作用。我还尝试创建一个单独的文件，然后使用导入将其导入到页面中，但结果也不好。

import React from 'react';
import { graphql, StaticQuery, Link } from 'gatsby';
const MainMenu = () => (
<StaticQuery query={graphql`{
allWordpressWpApiMenusMenusItems {
edges {
node {
items {
title
object_slug
url
wordpress_children {
title
object_slug
url
}
}
}
}
}
}
`} render={props => (
<ul className="menu">
{
props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(item => (
<li><Link to={`/${item.url}`} key={item.object_slug}>
{item.title}
</Link></li>
))
}
<ul className="submenu">
{props.allWordpressWpApiMenusMenusItems.edges[0].node.items.wordpress_children.map(subitem => (
<li><Link to={`/${subitem.url}`} key={subitem.object_slug}>
{subitem.title}
</Link></li>
))
}
</ul>
</ul >
)} />
);
export default MainMenu;

Answer 1

我设法找到了解决方案。对于任何其他在WordPress/Gastby网站上寻找子菜单项解决方案的人来说，这对我来说很有用：

import React from "react"
import { StaticQuery, graphql, Link } from "gatsby"
export default () => (
<StaticQuery
query={graphql`
query {
allWordpressWpApiMenusMenusItems {
edges {
node {
slug
name
items {
title
url
object_slug
wordpress_children {
title
url
}
}
}
}
}
}
`}
render={data => {
return (
<ul className="menu">
{data &&
data.allWordpressWpApiMenusMenusItems &&
data.allWordpressWpApiMenusMenusItems.edges &&
data.allWordpressWpApiMenusMenusItems.edges[0] &&
data.allWordpressWpApiMenusMenusItems.edges[0].node &&
data.allWordpressWpApiMenusMenusItems.edges[0].node.items &&
data.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
prop => {
return (
<li>
<Link
to={prop.url}
alt={prop.title}
>
{prop.title}
</Link>
<ul className="sub-menu">
{prop &&
prop.wordpress_children &&
prop.wordpress_children.map(child => {
return (
<li> <Link
className="dropdown-item"
to={child.url}
alt={child.title}
>
{child.title}
</Link></li>
)
})}
</ul>
</li>
)
}
)}
</ul>
)
}}
/>
)