Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

175
Vistas
React when useState change react-complex-tree not rerender

codesandbox link

  • I am using react-complex-tree to show my XML in tree format. I want to add button called ExpandAllTree

    const [expandedItems,setExpandedItems] = useState([]);

I am holding my tree Items here

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);
        });
    }
};

this code piece does travel all XML and create a data for react-complex-tree and also gets all Id's of tree element with

setExpandedItems(oldArray => [...oldArray,xmlObject.name]);

This part works perfect.

useEffect(() => {
    setExpandedItems([]);
    traverseXml(firstTreeData, DocumentXml);
    traverseXml(secondTreeData, AppHdrXml);
    }, [treeOpen]);

const handleOpenClick = () => {
    setTreeOpen(!treeOpen);
}

whenever a button hits it should rerender. But It is not rendering. when I check the logs on first time page open expandedItems is empty like an expected when I press the button expandedItems to get all tree IDs like expected again but in frontend nothings changes.

<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>

And there is no mistake on data type with expandedItems because when I give data manually which expandedItems gets, Tree shows as expanded.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

When you changed to ControlledTreeEnviroment and set items like

items={firstTreeData}

Tree start to rerender

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda