the initial state of an asynchronously loaded tree component is as follows:

treeData:

+:

:

:

:

the problem is:

1. child is not preceded by a + sign (cannot be clicked), but the status isLeaf is set to false
2. Expand to load is expanded, hoping not to expand

it feels like the Tree component is not re-rendered, but rather update state based on the original. How to solve the problem of asking for help?

main code:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { Tree } from "antd";

const TreeNode = Tree.TreeNode;

class Demo extends React.Component {
  state = {
    treeData: [
      {
        title: "Expand to load", key: "0", children: [
          { title: "child", key: "0-0", isLeaf: false }
        ]
      }
    ],
  }

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

  btnClick = () => {
    this.setState({
      treeData: [
        {
          title: "Expand to load", key: "0", children: [
            { title: "child", key: "0-0", isLeaf: false }
          ]
        }
      ],
    });
  }

  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 (
      <div>
        <Tree loadData={this.onLoadData} showLine>
          {this.renderTreeNodes(this.state.treeData)}
        </Tree>
        <button onClick={this.btnClick}>treedata</button>
      </div>
    );
  }
}

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

if necessary, you can download demo: https://github.com/wyzgo/antd_test.git