enlace de Codesandbox
Estoy usando react-complex-tree para mostrar mi XML en formato de árbol. Quiero agregar un botón llamado ExpandAllTree
const [elementosexpandidos,establecerelementosexpandidos] = useState([]);
Estoy sosteniendo mi árbol Artículos aquí
const traverseXml = (treeData, xmlObject) => { treeData[xmlObject.name] = { index: xmlObject.name, canMove: false, hasChildren: !!xmlObject.children.length, children: xmlObject.children.map(c => c.name), data: !xmlObject.children.length ? `${xmlObject.name}: ${xmlObject.value}` : xmlObject.name, canRename: false }; if (!xmlObject.children.isEmpty) { xmlObject.children.forEach(c => { setExpandedItems(oldArray => [...oldArray,xmlObject.name]); traverseXml(treeData, c); }); } };esta pieza de código viaja por todo XML y crea datos para react-complex-tree y también obtiene todas las identificaciones del elemento de árbol con
setExpandedItems(oldArray => [...oldArray,xmlObject.name]);Esta parte funciona perfecto.
useEffect(() => { setExpandedItems([]); traverseXml(firstTreeData, DocumentXml); traverseXml(secondTreeData, AppHdrXml); }, [treeOpen]); const handleOpenClick = () => { setTreeOpen(!treeOpen); }cada vez que se presiona un botón, debe volver a procesarse. Pero no está renderizando. cuando verifico los registros en la primera vez que abro la página, los elementos expandidos están vacíos como se esperaba cuando presiono el botón expandidos para obtener todos los ID de árbol como se esperaba nuevamente, pero en la interfaz no cambia nada.
<UncontrolledTreeEnvironment canDragAndDrop={true} canDropOnItemWithChildren={true} canReorderItems={true} dataProvider={new StaticTreeDataProvider(secondTreeData, (item, data) => ({...item, data}))} getItemTitle={item => item.data} viewState={{ ['Apphdr']: { expandedItems:expandedItems }, }} > <Tree treeId={"Apphdr"} rootItem={"AppHdr"}/> </UncontrolledTreeEnvironment>Y no hay error en el tipo de datos con elementos expandidos porque cuando doy datos manualmente que obtienen los elementos expandidos, el árbol se muestra como expandido.
Cuando cambió a ControlledTreeEnviroment y configuró elementos como
items={firstTreeData}Arbol comienza a renderizar