当 useState 改变时做出反应 react-complex-tree 不重新渲染

Question

codesandbox link

我正在使用 react-complex-tree 以树格式显示我的 XML。我想添加名为 ExpandAllTree
的按钮
const [expandedItems,setExpandedItems] = useState([]);

我在这里拿着我的树物品

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

这段代码确实遍历了所有 XML 并为 react-complex-tree 创建了一个数据，并且还获取了具有

的树元素的所有 ID

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

这部分工作完美。

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

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

只要点击一个按钮，它就应该重新呈现。但它不是渲染。当我在第一次打开页面时检查日志当我按下按钮 expandedItems 以再次获得预期的所有树 ID 时，expandedItems 像预期的那样是空的，但在前端没有任何变化。

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

并且 expandedItems 的数据类型没有错误，因为当我手动提供 expandedItems 获取的数据时，树显示为已展开。

Answer 1

当您更改为 ControlledTreeEnviroment 并设置类似

的项目时

items={firstTreeData}

树开始重新渲染

当 useState 改变时做出反应 react-complex-tree 不重新渲染

React when useState change react-complex-tree not rerender

javascript

state

reactjs

react-hooks

use-state