如何在react中映射一个对象并返回一个基于对象键的组件

Question

我有一个objectof object，我想循环遍历它并根据键显示它。

输入:

export let data = {
home: {
title: "home",
url: "/home"
},
dashboard: {
title: "dashboard",
url: "/dashboard"
},
pages: {
title: "pages",
url: "/pages"
},
subpages: {
title: "subpages",
url: "/pages/subpages"
},
login: {
title: "login",
url: "/pages/login"
},
account: {
title: "account",
url: "/dashboard/account"
}
}

如果URL是其他对象的子URL，那么它应该显示在它的下面。

预期输出:

Home
dashboard
account
pages
subpages
login

应该是这样显示的，但是在<h2>和<p>

Answer 1

您可以通过使用reduce构建层次结构来做到这一点。

let data = {
home: {
title: "home",
url: "/home"
},
dashboard: {
title: "dashboard",
url: "/dashboard"
},
pages: {
title: "pages",
url: "/pages"
},
subpages: {
title: "subpages",
url: "/pages/subpages"
},
login: {
title: "login",
url: "/pages/login"
},
account: {
title: "account",
url: "/dashboard/account"
}
}
var result = Object.entries(data).reduce((acc,[key,{title,url}]) => {
const parts = url.substring(1).split("/");
let obj = acc;
for(var i=0;i<parts.length;i++){
if(!obj[parts[i]]) obj[parts[i]] = {}
obj = obj[parts[i]];
}
obj.url = url;
return acc;
},{});
console.log(result);

Answer 2

嘿，这段代码可以帮上忙

let data = {
home: {
title: "home",
url: "/home"
},
dashboard: {
title: "dashboard",
url: "/dashboard"
},
pages: {
title: "pages",
url: "/pages"
},
subpages: {
title: "subpages",
url: "/pages/subpages"
},
login: {
title: "login",
url: "/pages/login"
},
account: {
title: "account",
url: "/dashboard/account"
}
}
Object.entries(data).map(([key, value]) => {
console.log(key);
})