如何从Json api创建动态侧栏？

我试图从Json API创建一个React动态侧栏

我需要使用以下三个条件为React中的双重迭代提供编码帮助：

如果json元素id==0==>1级外部Mennuitem

如果json元素[i]id===j]parent\u id===>2级子菜单项

如果父项id[i]===[j]id&&[j]父项id===0===>3级子项

但我可以实现外部菜单项。但我无法创建子菜单项

请帮我解决这个问题。请参阅所附图片。谢谢

 class App extends Component {

    constructor(props) {
    super(props);
    this.state = {
        mz:[
      {
          "id": 1,
          "name": "Menu1",
          "parent_id": 0
      },
      {
          "id": 9,
          "name": "SubMenu1-Menu1",
          "parent_id": 1
      },
      {
        "id": 26,
        "name": "8989",
        "parent_id": 9
      },
      {
          "id": 10,
          "name": "SubMenu2-Menu1",
          "parent_id": 1
      },
      {
          "id": 2,
          "name": "Menu2",
          "parent_id": 0
      },
      {
          "id": 11,
          "name": "SubMenu1-Menu2",
          "url": "",
          "order": 210,
          "type": 3,
          "is_active": true,
          "parent_id": 2
      },
      {
          "id": 12,
          "name": "SubMenu2-Menu2",
          "url": "",
          "order": 220,
          "type": 3,
          "is_active": true,
          "parent_id": 2
      }],};
    }

 render() {
    return (
      <div>
       {this.state.api.filter((el) => (el.parent_id === 0 ? el.name : null)).map((el) => (
          <ReactBootStrap.Navbar  >          
             {el.name}
                <ReactBootStrap.NavDropdown>
                  {(el.parent_id === el.id ? el.name : null).map((el) =>el.name)}//I CANNOT ITERATE CORRECTLY THIS PART
                </ReactBootStrap.NavDropdown>
          </ReactBootStrap.Navbar>
        ))}
      </div>
    );
  }
}
export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
mz:[
{
“id”：1，
“名称”：“菜单1”，
“父项id”：0
},
{
“id”：9，
“名称”：“子菜单1-Menu1”，
“家长id”：1
},
{
“id”：26，
“名称”：“8989”，
“家长id”：9
},
{
“id”：10，
“名称”：“子菜单2-Menu1”，
“家长id”：1
},
{
“id”：2，
“名称”：“菜单2”，
“父项id”：0
},
{
“id”：11，
“名称”：“子菜单1-Menu2”，
“url”：“，
“命令”：210，
“类型”：3，
“是否处于活动状态”：正确，
“家长id”：2
},
{
“id”：12，
“名称”：“子菜单2-Menu2”，
“url”：“，
“命令”：220，
“类型”：3，
“是否处于活动状态”：正确，
“家长id”：2
}],};
}
render（）{
返回(
{this.state.api.filter（（el）=>（el.parent_id==0？el.name:null））.map（（el）=>(
{el.name}
{（el.parent_id==el.id？el.name:null）.map（（el）=>el.name）}//我无法正确迭代此部分
))}
);
}
}
导出默认应用程序；

请参见此地图：

this.state.mz.map(item => {
    if(item.parent_id === 0){
        output[item.id] = item
    } else {
        if(!output[item.parent_id]['submenu']){
            output[item.parent_id]['submenu'] = {}
        }
        output[item.parent_id]['submenu'][item.id] = item
    }
})

请参见此地图：

this.state.mz.map(item => {
    if(item.parent_id === 0){
        output[item.id] = item
    } else {
        if(!output[item.parent_id]['submenu']){
            output[item.parent_id]['submenu'] = {}
        }
        output[item.parent_id]['submenu'][item.id] = item
    }
})

“output”循环类型“let output=[]”之前的简单变量“output”循环类型“let output=[]”之前的简单变量