将混淆代码转换为递归函数
Posted
技术标签:
【中文标题】将混淆代码转换为递归函数【英文标题】：Convert confuse code into Recursive function 【发布时间】：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 在选项左侧添加空格。
【参考方案1】：
对于每个选项组，您可以调用getOptions 函数，该函数返回父类别选项（具有name 和csslevel 属性）并使用Array.prototype.flatMap 映射子数组，递归调用@ 987654326@ 函数并展平结果，返回数组中的父项和子项选项。
const 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" ]
const getOptions = ( name, children = [], spacing = 0 ) => [
name, csslevel: spacing ,
...children.flatMap((child) =>
getOptions( ...child, spacing: spacing + 2 )
),
]
const options = data.flatMap(getOptions)
console.log(options)【讨论】：
真的解决了我的问题！我在数组的最终返回中添加了一个 .flat() 方法，只给出一个数组并在我的 reactjs 屏幕上对其进行迭代。我没有话要感谢你！我浪费了一个星期或更长时间，只是想这样做=/。非常感谢！ @LucianodiiSouza 我不确定预期的输出结构。刚刚更新了我的答案以使用flatMap。顺便说一句，如果csslevel 是0，您可以为选项名称添加粗体样式。不客气。以上是关于将混淆代码转换为递归函数的主要内容，如果未能解决你的问题，请参考以下文章