react map 双重循环 嵌套循环

json数据如下:

{
"items":[
{
"item": "BeJson",
"menuItem": ["menu1","menu2","menu3"]
},
{
"item": "mary",
"menuItem": ["menu1","menu2","menu3"]
},
{
"item": "even",
"menuItem": ["menu1","menu2","menu3"]
}
]
}

侧边栏组件如下:

import React, { Component } from 'react';
import { Menu, Icon,Switch } from 'antd';
import data from './slidedata.json';
const list = data.items;
const SubMenu = Menu.SubMenu;
class Slider extends Component{
state = {
theme: 'dark',
current: '0',
}

changeTheme = (value) => {
this.setState({
theme: value ? 'dark' : 'light',
});
}

handleClick = (e) => {
console.log('click ', e);
this.setState({
current: e.key,
});
}

render() {
return (
<div>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>

{
list.map(function(item,index){
return (
<SubMenu key={index} title={<span>{item.item}</span>}>
{
item.menuItem.map(function(item1,number){
return (
<Menu.Item key={number} id={number}>{item1}</Menu.Item>
);
})
}
</SubMenu>
);
}
)
}
</Menu>
</div>
);
}
}
export default Slider;