1. 程式人生 > 實用技巧 >antd 踩坑:為什麼 Tree defaultExpandAll defaultExpandedKeys 在重新整理後會失效?

antd 踩坑:為什麼 Tree defaultExpandAll defaultExpandedKeys 在重新整理後會失效?

原因其實很簡單。

              <Tree onSelect={handleTreeClick} defaultExpandedKeys={[rootOrgId]}>
                {this.renderTreeNodes(OrgTreeData.children)}
              </Tree>
renderTreeNodes = data => {
    if (!Array.isArray(data)) {
      return <></>;
    }
    return data.map(item => {
      
if (item.children && item.children.length > 0) { return ( <TreeNode title={item.title} key={item.key} dataRef={item}> {this.renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode key={item.key} dataRef={item} {...item} />; }); };

如果樹節點資料時從介面獲取的,那麼,這樣寫就會有一個問題:

當 Tree 渲染的時候, TreeNode 還沒有渲染!

也就是說,Tree 和 TreeNode 渲染不是同步的。

這樣當然會造成各種問題。只是碰到了這個而已。

解決方法很簡單,讓他們一起渲染就行。

            {
              OrgTreeData && OrgTreeData.children ? 
              <Tree onSelect={handleTreeClick} defaultExpandedKeys={[rootOrgId]}>
                {this.renderTreeNodes(OrgTreeData.children)}
              
</Tree> : <></> }

以上。