The Ant Design Tree defaultExpandAll setting is invalid, and it is impossible to expand all tree nodes, obtain the key of the last child node under each node, and then expand all tree nodes through expandedKeys

Project scenario:

Recently, I am using Ant Design's Tree tree control to display tree data, requiring all nodes to be displayed

---

Problem Description

In the API documentation, you can see that the defaultExpandAll property can be set to expand all tree nodes by default, but it is found that all nodes cannot be expanded during use.

---

Cause Analysis:

1. I began to think that it might be caused by the conflict between expandedKeys (controlled) expanded specified tree nodes and defaultExpandAll; 2. To
avoid the existence of test 1, it was found that all nodes could not be expanded. Baidu checked that defaultExpandAll does not take effect when loading data asynchronously (the default prefix attribute only takes effect when initializing, because defaultExpandAll has already been executed when loading data asynchronously)

---

solution:

Tip: You can achieve full expansion by controlling expandedKeys or rendering Tree after data loading is complete

Here I use the functional tree component packaged by my colleague. It is not easy to change the component, so I choose to control the Tree through expandedKeys to achieve full expansion.

Principle: Get the key of the last child node under each node (here is the unique identifier you give to the tree node), and then realize it through expandedKeys

Some code snippets:

  /*
  * 初始化树形数据展开项回调事件
  * @param treeData 接口获取的tree数据
  * @returns {*}
  * const [expandKey, setExpandKey] = useState<any>([]);
  */
  const mapTreeData = (treeData) => {
    
    
    const setExpandKeys:any = expandKey;
  
    treeData.forEach(child => {
    
    
      if (child.children && child.children.length > 0) {
    
    
        mapTreeData(child.children);
      }
      setExpandKeys.push(child?.id);
    });
    setExpandKey([...setExpandKeys]);
  };

⚠️Recursive implementation is used here

Recursion : It is the self-invocation of a function. In this way, the problem is decomposed into smaller versions of the same problem to solve the problem. Complex arrays can be processed, such as arrays nested arrays, objects nested objects, or deeper nested relationships.

Recursion is used here instead of loop because we are not sure how many layers of tree nested data there will be, and how many layers to traverse. Recursion is more powerful than loop because the recursive function maintains a stack that saves the current state of each recursive call, allowing the function to continue processing after obtaining the result of the sub-problem, making the code more concise.

Another point to note:
Since the current state stack is maintained recursively, setExpandKeys:any = expandKey in the recursive function retains the previously stored data.

The above is just a simple record. If there is any unclear or unreasonable expression, I still hope to give advice. I hope it will be helpful to you.