在 Reactjs 中递归构建数组

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);            }        });和 fetch 是这样的：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 [];    }};