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

【问题标题】：React when useState change react-complex-tree not rerender当 useState 改变 react-complex-tree 不重新渲染时做出反应
【发布时间】：2022-01-19 16:11:51
【问题描述】：

代码沙盒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);
}

当一个按钮被点击时，它应该重新渲染。但它不是渲染。当我在第一次打开页面时检查日志时当我按下按钮 expandItems 以再次获得所有树 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>

expandItems 的数据类型没有错误，因为当我手动提供数据时，expandItems 获取的数据，Tree 显示为展开。

【问题讨论】：

我没有看到您更新状态的任何明显问题。为了确认，您已验证/确认 expendedItems 状态数组已正确更新为您想要的？在阅读了react-complex-tree 文档后，我也没有看到任何明显的问题。认为您可以创建一个 running 代码框来重现我们可以实时检查和调试的问题？
它只需要一个最小的、可重现的例子，没有专有的。基本上，上面包含完整组件中的虚拟数据的代码可能就足够了。如果我们可以解决最小示例，那么目标就是让您将所学知识应用到更大的代码中。
我做到了。开始研究文档以尝试更好地理解软件包受控和不受控的环境。您正在使用UncontrolledTreeEnvironment，这对我来说意味着您无法控制它，类似于您将defaultValue 属性传递给它的不受控制的输入，并且输入控制自身与您传递value 和@ 的受控输入987654331@ 用于“控制”输入的道具。也许这对您有所帮助，因为您可能比我更熟悉react-complex-tree。不过我会继续深入研究。
感谢 @DrewReese 解决了
太棒了，很高兴听到它。干杯，祝你好运！

标签： javascript reactjs react-hooks state use-state

【解决方案1】：

当您更改为 ControlledTreeEnviroment 并设置项目时

items={firstTreeData}

树开始重新渲染

【讨论】：