est resté coincé dans la valeur de retour de la récursion

Question

J'ai écrit une petite fonction récursive pour trouver le niveau du menuItem. Voici la fonction :

const getSelectedMenuItemLevel = (menuItems, path, level = 0) => menuItems.forEach((menuItem) => {
  console.log(menuItem.path, path, menuItem.path === path, level);
  if (menuItem.path === path) {
    return level;
  }
  return getSelectedMenuItemLevel(menuItem.children, path, level + 1);
});

C'est comme ça que je l'appelle :

console.log(getSelectedMenuItemLevel(menuItems, 'two/three'));

Voici le tableau des éléments du menu :

[
  {
    path: 'one',
    name: 'One',
    children: [
      { path: 'one/one', name: 'One/One', children: [] },
      { path: 'one/two', name: 'One/Two', children: [] },
    ],
  },
  {
    path: 'two',
    name: 'Two',
    children: [
      { path: 'two/one', name: 'Two/One', children: [] },
      { path: 'two/two', name: 'Two/Two', children: [] },
      { path: 'two/three', name: 'Two/Three', children: [] },
    ],
  },
{
    path: 'three',
    name: 'Three',
    children: [],
  }
]

Cette fonction récursive me renvoie toujours undefined . Je m'attends à ce qu'il revienne level

Answer 1

Vous avez besoin d'une variable dans la fonction et vous la stockez en vérifiant l'itération pour un niveau trouvé avec Array#some car cette méthode utilise un court-circuit si un niveau valide est trouvé.

En gros, vous devez étendre les valeurs de retour souhaitées à undefined ou à une valeur numérique.

const getSelectedMenuItemLevel = (menuItems, path, level = 0) => {
    let value;
    menuItems.some((menuItem) => {
        if (menuItem.path === path) {
            value = level;
            return true;
        }
        const temp = getSelectedMenuItemLevel(menuItem.children, path, level + 1);
        if (temp) {
            value = temp;
            return true;
        }
      return false;
    });
    return value;
};

var menuItems = [
  {
    path: 'one',
    name: 'One',
    children: [
      { path: 'one/one', name: 'One/One', children: [] },
      { path: 'one/two', name: 'One/Two', children: [] },
    ],
  },
  {
    path: 'two',
    name: 'Two',
    children: [
      { path: 'two/one', name: 'Two/One', children: [] },
      { path: 'two/two', name: 'Two/Two', children: [] },
      { path: 'two/three', name: 'Two/Three', children: [] },
    ],
  },
{
    path: 'three',
    name: 'Three',
    children: [],
  }
];

console.log(getSelectedMenuItemLevel(menuItems, 'two/three'));