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

Posted 2023-02-19

【中文标题】当 useState 改变 react-complex-tree 不重新渲染时做出反应

【英文标题】：React when useState change react-complex-tree not rerender

【发布时间】：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 解决了

太棒了，很高兴听到它。干杯，祝你好运！

【参考方案1】：

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

items=firstTreeData

树开始重新渲染