Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
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 Respostas
Responde à pergunta

0

When you changed to ControlledTreeEnviroment and set items like

items={firstTreeData}

Tree start to rerender

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda