在 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 [];

    }

};