如何使用ant design treeselect异步加载节点？

Question

组件：https://ant.design/components/tree-select/ loadData选项没有示例。

async getChildren(node) {
    console.log(node);
    let r = $.get("/tree", {id: node.value})
    console.log(await r);  // request works
    return r;
}

使用此代码，我只看到树加载，没有任何反应。不是错误，但子节点未附加到树。

如果我没有返回Promise，我会收到一个巨大的错误和一个空白页面。

Answer 1

这是loadData函数的一个例子：

 onLoadData = (treeNode) => {
    console.log('load data...');
    return new Promise((resolve) => {
      setTimeout(() => {
        const treeData = [...this.state.treeData];
        getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
        this.setState({ treeData });
        resolve();
      }, 500);
    });
  }

你可以在更深入的例子中找到here

为了更清楚：

• TreeData是TreeNode source的数组
• antd tree select使用rc-tree因为antd建立在rc-components之上你可以看到source
• 对于延迟加载，你需要操作treeNode，上面代码片段的作用是：每次加载新数据它都将是一个treeNode对象，并将调用onLoadData（）回调，在那里你提供代码如何处理该节点。 （示例只是附加到状态的treeData变量]