The expandedKeys property of Tree in Antd3.7.2 is set, and when expanding the node, the loadData method is confused (3.6.* is OK)?

problem description

The expandedKeys property of the Tree component in

Antd3.7.2 (as in the subsequent version, as of now 3.8.0) sets the String [] array of the corresponding nodes to be expanded. When drawing the tree, the nodes set according to expandedKeys are indeed expanded in turn, but it is found that:
1. If the node has its own children, expansion, this node does not trigger the loadData method, which will prevent some nodes that already have children from loading data asynchronously. When I was in version 3.6.4, each time I expanded the node, I would trigger loadData, and use if (treeNode.props.children) {} or add the node variable if (treeNode.props.refData.isLoad) to control whether the logic in loadData () {} is actually executed.
2. When the expandedKeys.length of expandedKeys: [] is greater than 1, for example, when expandedKeys.length=3, expands the second node, it will loadData the node of the previous loadData again. There will be problems with unique-key.

the environmental background of the problems and what methods you have tried

my webpack configuration is ^ 3.0.0, that is, the smaller version will be automatically updated after the major version remains the same, cnpm i.
didn"t know why this happened at first, because I"ve used this property for Tree components before. Found that after the automatic upgrade, the first feeling is that this use is no longer advocated, but think about it, the official website tutorials have not changed, and the attribute function has not achieved the effect, I am sure this is BUG.
the solution is to directly set the antd version to 3.6.4

related codes

/ / Please paste the code text below (do not replace the code with pictures)

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Tree } from "antd";
const TreeNode = Tree.TreeNode;
class Demo extends Component {
    state = {
        treeData: [
            {
                title: "Expand to load00", key: "0",
                // children: [
                //     { title: "00-0", key: "00-0" },
                //     { title: "00-1", key: "00-1" },
                //     { title: "00-2", key: "00-2" },
                // ]
            },
            { title: "Expand to load01", key: "1" },
            { title: "Expand to load02", key: "2" },
            { title: "Expand to load03", key: "3" },
            { title: "Tree Node04", key: "4", isLeaf: true },
            { title: "Tree Node05", key: "5", isLeaf: true },
        ],
    }

    onLoadData = (treeNode) => {
        console.log("loadData", treeNode);
        return new Promise((resolve) => {
            if (treeNode.props.children) {
                resolve();
                return;
            }
            setTimeout(() => {
                treeNode.props.dataRef.children = [
                    {
                        title: "Child Node1",
                        key: `${treeNode.props.eventKey}-0`
                    },
                    { title: "Child Node2", key: `${treeNode.props.eventKey}-1` },
                    { title: "Child Node3", key: `${treeNode.props.eventKey}-2` },
                    { title: "Child Node4", key: `${treeNode.props.eventKey}-3` },
                ];
                this.setState({
                    treeData: [...this.state.treeData],
                });
                resolve();
            }, 1000);
        });
    }

    renderTreeNodes = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} dataRef={item} />;
        });
    }

    render() {
        return (
            <Tree
                loadData={this.onLoadData}
                expandedKeys={["0", "1", "2"]}
            >
                {this.renderTreeNodes(this.state.treeData)}
            </Tree>
        );
    }
}


ReactDOM.render(<Demo />, document.getElementById("root"));

what result do you expect? What is the error message actually seen?

 expandedKeys={["0", "1", "2"]}loadData33.6.43loadData6key4unique-key(key^_^):


expandedKeys={["0"]} treeData"Expand to load00"childrenchildren:


loadData(3.6.4):

this makes the

in the loadData implementation code
if (treeNode.props.children) {
                resolve();
                return;
            }

seems meaningless, and there is children under my node. You can"t limit my loadData, can you? How can I refresh it?

Apr.06,2021

how to solve the problem later

Menu