尝试映射JSON字典child_items数组(如果存在)

Question

我有一个react Nav菜单，它从Wordpress JSON菜单字典文件中读取。它运行良好，但只抓取一级导航项目。某些导航项目具有不显示的下拉菜单。在JSON中，主NAV项可能有也可能没有键：child_items，child_item斯是一个数组。

所以我首先检查键是否存在，然后尝试映射新的菜单项。。我的代码是用于子菜单项的，到目前为止完全失败。。我可以成功抓取一级物品

Nav位于Components/headerComponent/header.js中main-menu.json在公共中

这是一个保险箱https://codesandbox.io/live/q625nmv

import React, { Component, useState, useEffect } from 'react';
import {
Link
} from 'react-router-dom';
function Nav() {

const [menus, setMenus] = useState([]);

useEffect(() => {
fetch("main-menu.json" ,{
headers : { 
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})

.then(res => res.json())

.then(json =>{
setMenus(json.items)}
)


}, []);


return (

<nav>
<ul>
{Object.keys(menus).map((ky, idx)=> (

<li id={idx} key={idx}>
<Link
to={{
pathname: menus[ky].slug,
state: {
pageId: menus[ky].object_id,
},
}}
>
{menus[ky].title}
</Link>
/* I added here to  */ 
{if(menus[ky].child_items) { /* do stuff */ 
<ul>
{menus[ky].child_items.map(child_items => (
<li key={child_items.ID}>
<Link
to={{
pathname: child_items.slug,
state: {
pageId: child_items.object_id,
},
}}
>
{child_items.title}
</Link>
</li>
))}
</ul>
}}
/* here for my sub nav items, all code outsid eof this works fine without my errors  */ 
</li>
))}

</ul>
</nav>

);
}

Answer 1

Navbar

它用子菜单渲染菜单。你需要自己做造型。

function Nav() {
const [menus, setMenus] = useState([]);
useEffect(() => {
fetch("main-menu.json", {
headers: {
"Content-Type": "application/json",
Accept: "application/json"
}
})
.then((res) => res.json())
.then((json) => {
console.log(json);
setMenus(json.items);
});
}, []);
return (
<nav>
<ul style={{ display: "flex" }}>
{menus &&
menus.map((item) => (
<li key={item.ID}>
<Link
to={{
pathname: item.slug,
state: {
pageId: item.id
}
}}
>
{item.title}
</Link>
{item.child_items &&
item.child_items.map((childItem) => (
<ul>
<li key={childItem.ID}>
<Link
to={{
pathname: childItem.slug,
state: {
pageId: childItem.id
}
}}
>
{childItem.title}
</Link>
</li>
</ul>
))}
</li>
))}
</ul>
</nav>
);
}