Primero, déjame explicarte lo que quiero hacer. Tengo una estructura de datos similar a un árbol, con una profundidad arbitraria a partir de la cual quiero hacer una lista de todas las ramas que no son hojas que paso como accesorios al componente secundario. El conjunto de datos y la función recursiva se encuentran a continuación.

Problema: ¡Obtengo el doble de datos en la matriz! Noté que la función getBranches() también se llama en Chrome VM y simplemente agrega los mismos datos nuevamente a la matriz ya existente. Ver foto abajo. ¿Es mi enfoque fundamentalmente incorrecto? ¿Qué hacer?

 const treeData = { 'first-level-node-1': { // key label: 'Regija', type: TYPES[1], index: 0, // rendering order url: 'http://opa.com', nodes: { 'second-level-node-1': { label: 'Bolnica BN', index: 0, type: 1, nodes: { 'third-level-node-1': { label: 'Konektor Sysmex', index: 0, nodes: {}, type: TYPES[0] }, }, }, }, }, 'first-level-node-2': { label: 'Regija 2', index: 1, type: TYPES[1], nodes: { '2-1': { label: 'Dz Trebinje', index: 0, type: 1, nodes: { '3-1': { label: 'Konektor Biomerux', index: 0, hasNodes: false, type: TYPES[0], } } } } },

};

Mi función getBranches() :

 const getBranches = (treeData) => { console.log('i= ',i++) Object.keys(treeData).forEach((key) => { if (treeData[key].type!==TYPES[0]) { branches.push({key: key, label: treeData[key].label}); console.log({key: key, label: treeData[key].label}) treeData[key].nodes && getBranches(treeData[key].nodes) }; }); return [...branches];

};

Mi componente:

 const Sites = () => { const branches = getBranches(treeData); console.log(branches); //const [data, setData] = useState(treeData); return ( <Container fluid="md"> <Row> <Col> <MyTreeView data={treeData}/> </Col> <Col> <BranchView sites={treeData} parentList={branches} /> </Col> </Row> </Container> );

};

Alguna información adicional:

rama vs hoja se distingue por type de propiedad

La imagen. Fíjate en la i