Rekursiver Aufruf – Problem mit der rekursiven Array-Rekursion von Javascript

Question

Jetzt muss es zu einem Baumknoten zusammengestellt werden, der auf den vom Server angeforderten Daten basiert. Die Datenstruktur nach der Serveranforderung ist wie unten gezeigt. und der Schlüssel unter dem Objekt ist ein übergeordneter Wert, das untergeordnete Array.

Zum Beispiel hat 1 im Bild oben ein untergeordnetes Element, das ein Array [„2“] ist, und das untergeordnete Element mit dem Wert 2 hat 4 untergeordnete Elemente, also [„29“, „39“, „38“, „37“. "]

Schließlich muss die folgende Datenstruktur generiert werden, d. h. der Schlüssel ist die Zeichenfolge des übergeordneten Elements, und da es mehrere untergeordnete Elemente gibt, handelt es sich um ein Array

const data = ["1":["2":["29":["24":["27":["26"]]],"39":["47"],"38":["43":["45"]],"37":["42":["46"]]]]]

Nochmals vielen Dank im Voraus.

Answer 1

var topology = [ ... ];

function rebuildTopo(index) {
    var topo = topology[index];
    var check = false;
    
    if(!topo) {
        return null;
    } else if(topo instanceof Array) {
        var obj = {};
        
        for(var j in topo) {
            var t = topo[j];
            obj[t] = rebuildTopo(t);
            
            if(!!obj[t])
                check = true;
        }
        
        if(check)
            return obj;
        else
            return Object.keys(obj);
    }
}

console.log(JSON.stringify({1: rebuildTopo(1)}));

结果：

Answer 2

你要生成的数据应该是这种形式吧：

{
  key: '1',
  children: [{
    key: '2',
    children: [...]
  }]
}

function appendChildren (data, key = '1') {
  const node = { key }
  if (Array.isArray(data[key])) {
    node.children = data[key].map(child => appendChildren(data, child))
  }
  return node
}

Answer 3

@cool_zjy 多谢。
是的，需要你这种数据结构，问题描述里没有写清楚，抱歉。
现在这个递归后的数据，需要塞入到antd的treenode里面，也就是每个parent需要由child组成Treenode，比如这样（举个例子，children节点没有全部写出来）。

        <TreeNode title="1" key="1">
          <TreeNode title="2" key="2">
            <TreeNode title="29" key="29">
                <TreeNode title="24" key="24">
                    <TreeNode title="27" key="27">
                        <TreeNode title="26" key="26" />
                    </TreeNode>
                </TreeNode>
            </TreeNode>
            <TreeNode title="39" key="39">
                <TreeNode title="47" key="47" />
            </TreeNode>
            <TreeNode title="38" key="38">
                <TreeNode title="43" key="43">
                    <TreeNode title="45" key="45" />
                </TreeNode>
            </TreeNode>
            <TreeNode title="37" key="37">
                <TreeNode title="42" key="42">
                    <TreeNode title="46" key="46" />
                </TreeNode>
            </TreeNode>
          </TreeNode>
        </TreeNode>

这个是官方文档，以下代码是我的实现（参考了官方文档里的异步数据加载部分的代码），不过报错了。
https://ant.design/components...

                const appendChildren = (data, key = '1') => {
                    const node = { key }
                    if (Array.isArray(data[key])) {
                        node.children = data[key].map(child => appendChildren(data, child))
                    }
                    return node
                }
                const firstKey = Object.keys(topology)[0];   //这里的topology是服务端返回的数据
                const result = [appendChildren(topology,firstKey)];
                const loop = data => data.map((item) => {
                    if (item.children) {
                        return <TreeNode title={item.key} key={item.key}>{loop(item.children)}</TreeNode>;
                }
                    return <TreeNode title={item.key} key={item.key} />;
                });
                this.setState({treeData:loop(result)});