Глядя в глубоко вложенный объект в React

Question

Мои данные выглядят так:

let nodes= [{
    name: 'one',
    id: 1
    children: [{
        name: 'one-one',
        id: 11,
        children: [{
             name: 'one-one-one',
             id: 111,
             children: []
        },
        {
            name: 'one-one-two',
            id: 112,
            children: []
        }]
    },
    {
        name: 'one-two',
        id: 12,
        children: []
    }]
},
{
   name: 'two',
   id: 2,
   children: []
}];

Я пытаюсь выполнить некоторые действия с этим объектом, например найти идентификатор или проверить значение каждого узла. До сих пор я сделал это с помощью рекурсивной функции, которая обернута циклом for, но выглядит неаккуратно, а не как «способ реагирования» для этого.

Моя функция найти Id выглядит следующим образом:

findNodeById = (currNode, id) => {
        if (currNode.id === id) {
            return currNode;
        }

        if (currNode.hasOwnProperty('children')) {
            for (const i in currNode.children) {
                const foundNode = this.findNodeById(currNode.children[i], id);
                if (foundNode) {
                    return foundNode ;
                }
            }
        }

    return null;
};

for (const node in nodes) {
     const currNode= nodes[node],
           selectedValue = findNodeById(currNode, 12);

     if(selectedValue) {
         break;
     }
}

Нет ли лучшего и более умного способа сделать то же самое?

Answer 1

Вы не должны сохранять свои данные структурированными в первую очередь именно по этой причине. Вы должны сделать вашу структуру данных плоской, используя идентификаторы в качестве ссылок на реальные объекты. Используя идентификаторы узлов в качестве ключей в объекте узлов, мы можем добиться производительности O (1).

let nodes= {
    '1': {
        name: 'one',
        id: 1,
        parent: null
        children: [11, 12],
    },
    '11': {
        name: 'one-one',
        id: 11,
        parent: 1,
        children: [111, 112],
    },
    '111': {
        name: 'one-one-one',
        id: 111,
        parent: 11,
        children: [],
    },
    '112': {
        name: 'one-one-two',
        id: 112,
        parent: 11,
        children: [],
    },
    '12': {
        name: 'one-two',
        id: 12,
        parent: 1,
        children: [],
    },
    '2' :{
        name: 'two',
        id: 2,
        parent: null,
        children: [],
    }
};

Теперь становится несложно выбрать узел или обновить узел в списке. Однако если вы хотите нарисовать дерево на экране, вам все равно понадобится способ преобразовать список в дерево. Для этого случая я бы использовал библиотеку, такую ​​как: https://www.npmjs.com/package/performant-array-to-tree