Question

我试图从React中获取的数组创建一个menuTree。我的问题是我不知道如何递归构建数组：

让我们说我获取mainUrl并获取数组：

[
 {"id":"EU","type":"l","text":"Europe"},
 {"id":"AS","type":"l","text":"Asia"}
]

由于类型为“ l”，我需要执行另一次提取：mainUrl / EU

现在我得到了：

[
 {"id":"SP","type":"l","text":"Spain"},
 {"id":"FR","type":"l","text":"France"}
]

这两种类型均为“ l”，因此我要进行另一次提取：mainUrl / EU / SP

现在我得到了：

[
 {"id":"MA","type":"t","text":"Madrid"}
]

因为类型现在是“ t”，所以我停下脚步，然后从法国再到亚洲重新开始。

请记住，我不知道他们在数组中的孩子的部门

我的数组应如下所示：

[
    {
        "id": "EU",
        "type": "l",
        "text": "Europe",
        "children": [
            {
                "id": "SP",
                "type": "l",
                "text": "Spain",
                "children":[
                    {
                        "id": "MA",
                        "type": "t",
                        "text": "Madrid"
                    }
                ]
            },
            {
                "id": "FR",
                "type": "l",
                "text": "France",
                "children": [
                    {
                        "id": "PA",
                        "type": "t",
                        "text": "Paris"
                    }
                ]
            }
        ]
    },
    {
        "id": "AS",
        "type": "l",
        "text": "Asia",
        "children":[...]
    }
]

Answer 1

const mainUrl = "yourMainUrl"; 

const fetchDataTree = async url => {

  // I assume you will handle the fetch with your own method
  let countryArr = await yourFetchFunction(url);

  for (let key in countryArr) {
   if (countryArr[key].type === "l") {
     countryArr[key].children = await fetchDataTree(url + "/" + countryArr[key].id)
   }
 }

 return countryArr
}

const yourDataTree = await fetchDataTree(mainUrl);

Answer 2

const results = fetch("");
        function getChildren(name){
            const fetchData = fetch(name);
            fetchData.forEach(item => {
                if (item.type === "l") {
                    item.children = getChildren(item.id);
                }
            });
            return fetchData;
        }

        results.forEach(item => {
            if (item.type === "l") {
                item.children = getChildren(item.id);
            }
        });

并且获取是这样的：

function fetch(u) {
    switch (u){
        case "":
            return [
                {
                    id: "EU",
                    type: "l",
                    text: "Europe"
                },
                {
                    id: "AS",
                    type: "l",
                    text: "Asia"
                }
            ]
        case "EU":
            return [
                {
                    id:"SP",
                    type:"l",
                    text:"Spain"
                },
                {
                    id:"FR",
                    type:"l",
                    text:"France"
                }
            ];
        case "SP":
            return [
                {
                    id:"MA",
                    type:"t",
                    text:"Madrid"
                }
            ];
        default:
            return [];
    }
};

在Reactjs中递归构建数组

2 个答案: