在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: []
}];

我正在嘗試對該對象執行一些操作，例如查找ID或檢查每個節點的值。 到目前為止，我已經完成了一個遞歸函數的實現，該遞歸函數用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

正是由於這個原因，您不應該首先將數據的結構保持這樣。 您應該通過使用id作為對實際對象的引用來使數據結構平坦。 通過使用節點的id作為node對象中的鍵，我們可以具有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