来自嵌套对象数组的动态面包屑

Question

我在沙盒中重现了我的问题：https://codesandbox.io/s/cool-northcutt-7c9sr

我正在为如何制作动态面包屑的逻辑而苦苦挣扎。我的项目是一个家具目录。用户从他需要的下拉菜单类别中进行选择。结果是一个家具列表。在该页面上，我需要制作面包屑。我嵌套了 5-6 层深的对象数组。我不知道如何遍历这个数组。

当用户单击菜单时，我会保存所有索引，然后呈现项目。问题是不知道如何使用这些索引来制作面包屑

根据这个数组，我需要制作面包屑

感谢任何指导或帮助。

Answer 1

我用递归函数解决了

const getPath = (data, [{ key, index } = {}, ...rest]=[], tempStore = []) => {
    if (key in data) {
      const obj = data[key][index];
      tempStore.push(obj)
      let breadcrumb = [obj.name, ...getPath(obj, rest, tempStore)];
      return breadcrumb
    }
    if (!rest.length) {
      setBreadcrumbData(tempStore) // useState hook
    }
    return [];
  }

来自嵌套对象数组的动态面包屑

Dynamic breadcrumbs from nested array of objects

javascript

logic

breadcrumbs

reactjs