【发布时间】：2021-04-26 06:01:57
【问题描述】：
我有一个构建 Select 组件的函数，在其中使用一个包含名为“服务类别”的对象的数组，我们可以（或不）拥有一个包含新“服务类别”的子项数组（a具有相同结构的子类别）。 其实我有这个代码（丑陋，但工作代码）
function buildMenu() {
setIsLoading(true);
const newOptions = [];
categories.map((category) => {
const newCategory = {
...category,
csslevel: 0,
};
newOptions.push(newCategory);
const { children } = newCategory;
if (Array.isArray(children)) {
children.map((child) => {
const newChildren = {
...child,
csslevel: 2,
};
newOptions.push(newChildren);
if (Array.isArray(newChildren.children)) {
const subchildl1 = newChildren.children;
subchildl1.map((subchild2) => {
const newSubchild2 = {
...subchild2,
csslevel: 5,
};
newOptions.push(newSubchild2);
if (Array.isArray(newSubchild2.children)) {
const subchild3 = newSubchild2.children;
subchild3.map((subchildl4) => {
const newSubchild4 = {
...subchildl4,
csslevel: 7,
};
newOptions.push(newSubchild4);
if (Array.isArray(newSubchild4.children)) {
const subchild5 = newSubchild4.children;
subchild5.map((subchild6) => {
const newSubchild6 = {
...subchild6,
csslevel: 9,
};
newOptions.push(newSubchild6);
if (Array.isArray(newSubchild6.children)) {
const subchildl7 = newSubchild6.children;
subchildl7.map((subchildl8) => {
const newSubchild8 = {
...subchildl8,
csslevel: 11,
};
newOptions.push(newSubchild8);
if (Array.isArray(newSubchild8.children)) {
const subchildl9 = newSubchild8.children;
subchildl9.map((subchildl10) => {
const newSubchild10 = {
...subchildl10,
csslevel: 13,
};
newOptions.push(newSubchild8);
});
}
});
}
});
}
});
}
});
}
});
}
setOptions(newOptions);
});
setIsLoading(false);
}
基本上，我需要一个 Select 组件 (ReactJS/Material-ui) 来呈现此类别及其各自的子类别。
请注意，就像子类别一样，是一个有子类别的类别，我们可以在子类别中拥有无限的子类别，如下例所示：
[
{
...categoryInfo,
children: [
{
...subcategoryInfo,
children: [
{
...yesAnewSubcategory,
children: [...]
}
]
},
{
...subcategoryInfo,
}
]
}
]
它确实构建了一个带有选项的 Select 组件，我需要在一个选择中显示所有内容，但是用空格表示这是其他类别/子类别的子类别。 但是，我知道，在某些时候，这将达到 Array.isArray(child) 内部 Array.isArray(child) 的限制。
编辑： 此数据来自 api 请求。我想使用一个递归，它为每个类别/子类别构建一个新数组，在数组中的同一级别，但 cssLevel 为每个子类别级别递增。
{
"data": [
{
"id": 34,
"name": "Serviços Premium",
"slug": "servicos-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 4,
"aasm_state": "enabled",
"system_code": 100042,
"business_id": 3,
"parent_id": null,
"parents_count": 0,
"parents": [null],
"date_last_sync": null,
"children": [
{
"id": 35,
"name": "Cats Premium",
"slug": "cats-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 5,
"aasm_state": "enabled",
"system_code": 100043,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 36,
"name": "Cats Premium Male",
"slug": "cats-premium-male",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 6,
"aasm_state": "enabled",
"system_code": 100044,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 37,
"name": "Cats Premium Female",
"slug": "cats-premium-female",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 7,
"aasm_state": "enabled",
"system_code": 100045,
"business_id": 3,
"parent_id": 36,
"parents_count": 1,
"parents": [{ "id": 36, "name": "Cats Premium Male" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium Male > Cats Premium Female"
}
],
"chain_name": "Cats Premium > Cats Premium Male"
},
{
"id": 38,
"name": "Cats Diamond",
"slug": "cats-diamond",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 8,
"aasm_state": "enabled",
"system_code": 100046,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium > Cats Diamond"
},
{
"id": 45,
"name": "Subcategoria de Cats Premium",
"slug": "subcategoria-de-cats-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 15,
"aasm_state": "enabled",
"system_code": 100053,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium > Subcategoria de Cats Premium"
}
],
"chain_name": "Serviços Premium > Cats Premium"
},
{
"id": 39,
"name": "Dogs Diamond",
"slug": "dogs-diamond",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 9,
"aasm_state": "enabled",
"system_code": 100047,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > Dogs Diamond"
},
{
"id": 40,
"name": "Dogs Premium",
"slug": "dogs-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 10,
"aasm_state": "enabled",
"system_code": 100048,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 41,
"name": "Banho Dogs Premium",
"slug": "banho-dogs-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 11,
"aasm_state": "enabled",
"system_code": 100049,
"business_id": 3,
"parent_id": 40,
"parents_count": 1,
"parents": [{ "id": 40, "name": "Dogs Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Dogs Premium > Banho Dogs Premium"
}
],
"chain_name": "Serviços Premium > Dogs Premium"
},
{
"id": 43,
"name": "Consulta Veterinária",
"slug": "consulta-veterinaria",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 13,
"aasm_state": "enabled",
"system_code": 100051,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > Consulta Veterinária"
},
{
"id": 44,
"name": "PetCare",
"slug": "petcare",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 14,
"aasm_state": "enabled",
"system_code": 100052,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > PetCare"
}
],
"chain_name": "Serviços Premium"
},
{
"id": 3,
"name": "Teste 002 edit",
"slug": "teste-002",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 3,
"aasm_state": "enabled",
"system_code": 100011,
"business_id": 3,
"parent_id": null,
"parents_count": 0,
"parents": [null],
"date_last_sync": null,
"children": [
{
"id": 42,
"name": "Um novo teste",
"slug": "um-novo-teste",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 12,
"aasm_state": "enabled",
"system_code": 100050,
"business_id": 3,
"parent_id": 3,
"parents_count": 1,
"parents": [{ "id": 3, "name": "Teste 002 edit" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Teste 002 edit > Um novo teste"
}
],
"chain_name": "Teste 002 edit"
}
]
}
有人可以帮助我吗？ 谢谢！
【问题讨论】：
-
您能解释一下
csslevel值背后的逻辑吗？您能分享一些示例数据和预期输出吗？ -
这是函数构建的结果：imgur.com/LvNWJ9m，我已经更新了请求，使用了一些来自 api 的 json 数据。
-
对不起，当我按下更新按钮时，我的互联网出现故障，但现在已保存。 csslevel 是选择组件（如图所示）子类别中的空格数，有一个空间可以将其与父类别区分开来。 tha pattern 0, 2, 5, 7 只是空格的个数，这可以是每层两个空格，没有问题
-
这将返回单个数组状态 (useState([]))，每个类别/子类别作为该数组中的一个对象。你可以在这里看到预期的结果：api.npoint.io/3e312f1d7ee3b2a601e7（我推荐 json 查看器扩展，因为这个 json 太大了）。目标是使用 array.map 在 Select 组件中显示每个对象。使用 cssLevel 在选项左侧添加空格。
标签： javascript reactjs ecmascript-6 material-ui recursive-datastructures