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> : <></>
            }

以上。