Reactjs 反应在另一个映射中运行.map或.filter

如何在另一个地图中运行地图或过滤器？我有一些带菜单的Json。如果我的第一个级别有任何child，我希望将Json和se循环为true。如果他们有孩子，则返回引导下拉列表，如果没有，则返回正常按钮。然后循环true all child（如果有）

import React from 'react';

// MockData
var MockData = [
    {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1"
}, {
    "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate"
}, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate"
}, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate"
}, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate"
}, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1"
}, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano"
}, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6"
}, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6"
}, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6"
}, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6"
}, {
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1"
}, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12"
}, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13"
}, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13"
}, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13"
}, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12"
}]


export default class Test2 extends React.PureComponent {

  constructor(props) {
        super(props);

        this.state = {
      showSubMenu: []
        };
    }


  render() {

        var children = {};
    for (let obj of MockData) {
      if (!children.hasOwnProperty(obj.parentid)) {
        children[obj.parentid] = [obj.id];
      }
      else {
        children[obj.parentid].push(obj.id);
            }
    }

    const map_func = (firstLevel, index) => {
      if (children.hasOwnProperty(firstLevel.id)) {
        return <p><b>Dropdown / {firstLevel.text} / {firstLevel.parentid}</b></p>;
      } else {
        return <p>Button / {firstLevel.text} / {firstLevel.parentid}</p>;
          }
    };

    return (

      <div>
        {MockData.map(map_func)}
      </div>

    );  
  }

}

从“React”导入React；
//模拟数据
var MockData=[
{
“文本”：“巧克力饮料”，
“id”：“1”，
“父ID”：“-1”
}, {
“id”：“2”，
“parentid”：“1”，
“文本”：“热巧克力”
}, {
“id”：“3”，
“parentid”：“1”，
“文本”：“薄荷热巧克力”
}, {
“id”：“4”，
“parentid”：“1”，
“文本”：“咸焦糖热巧克力”
}, {
“id”：“5”，
“parentid”：“1”，
“文本”：“白热巧克力”
}, {
“id”：“6”，
“文本”：“浓缩咖啡饮料”，
“父ID”：“-1”
}, {
“id”：“7”，
“家长ID”：“6”，
“文本”：“美国咖啡馆”
}, {
“id”：“8”，
“文本”：“拿铁咖啡”，
“父ID”：“6”
}, {
“id”：“9”，
“文本”：“咖啡摩卡”，
“父ID”：“6”
}, {
“id”：“10”，
“文本”：“卡布奇诺”，
“父ID”：“6”
}, {
“id”：“11”，
“文本”：“南瓜辣味拿铁”，
“父ID”：“6”
}, {
“id”：“12”，
“文本”：“Frappuccino”，
“父ID”：“-1”
}, {
“id”：“13”，
“文本”：“咖啡香草Frappuccino”，
“parentid”：“12”
}, {
“id”：“15”，
“文本”：“450卡路里”，
“parentid”：“13”
}, {
“id”：“16”，
“文本”：“16g脂肪”，
“parentid”：“13”
}, {
“id”：“17”，
“正文”：“13g蛋白质”，
“parentid”：“13”
}, {
“id”：“14”，
“文本”：“咖啡香草Frappuccino灯”，
“parentid”：“12”
}]
导出默认类Test2扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
显示子菜单：[]
};
}
render（）{
var children={}；
对于（让模拟数据对象）{
如果（！children.hasOwnProperty（obj.parentid））{
子对象[obj.parentid]=[obj.id]；
}
否则{
子对象[obj.parentid].push（obj.id）；
}
}
常量映射函数=（第一级，索引）=>{
if（children.hasOwnProperty（firstLevel.id））{
返回下拉列表/{firstLevel.text}/{firstLevel.parentid}
；
}否则{
返回按钮/{firstLevel.text}/{firstLevel.parentid}
；
}
};
返回(
{MockData.map（map_func）}
);  
}
}

您只需构建一个地图，如：

var children = {};
for (let obj of MockData) {
    if (!children.hasOwnProperty(obj.parentid)) {
        children[obj.parentid] = [obj.id];
    }
    else {
        children[obj.parentid].push(obj.id);
    }
}

现在，您可以通过以下方式轻松检查您的

firstLevel

是否至少有一个子项：

if (children.hasOwnProperty(firstLevel.id)) {
    // bootstrap dropdown
} else {
    // normal button
}

并且子id位于

children[firstLevel.id]

中（如果有）

编辑：因此您的最终代码应该如下所示：

  render() {
    const map_func = (firstLevel, index) => {
      if (children.hasOwnProperty(firstLevel.id)) {
        // return bootstrap dropdown;
      } else {
        // return normal button;
      }
    };

    return (

      <div>
        {MockData.map(map_func)}
      </div>

        );  
    }

render（）{
常量映射函数=（第一级，索引）=>{
if（children.hasOwnProperty（firstLevel.id））{
//返回引导下拉列表；
}否则{
//返回正常按钮；
}
};
返回(
{MockData.map（map_func）}
);  
}

if语句放在哪里？作为回报还是？完整的代码看起来如何？例如，您可以将其放在渲染函数中。查看我编辑的答案如果我想在第一级循环“全部为真”怎么办？现在，我所有的孩子也被作为“正常按钮”返回。我确实尝试过：if（children.hasOwnProperty（firstLevel.id）&&firstLevel.id===-1）{Hmm，我可以看到您更新的代码吗？您还可以将孩子记录到控制台并发布输出吗？