antd tree异步加载,只有首次点击加载,再次点击不加载问题
场景:最近做tree异步加载的功能,但是发现只有我第一次点击的时候,会调用方法加载,后面再点击都不会再加载。
需求:每次点击都会加载
解决方法:
用onExpand,onLoad,loadedKeys,expandedKeys
<Tree
showIcon
blockNode
loadData={this.onLoadData}
onLoad={this.onLoad} // 节点加载完毕时触发
onSelect={this.onSelectTree}
selectedKeys={selectedKeys}
onExpand={this.onExpand} // 展开/收起节点时触发
expandedKeys={expandedKeys} // 已经展开的节点
loadedKeys={loadedKeys} // 已经加载的节点
>
{this.renderTreeNodes(dataSource)}
</Tree>
// 展开/收起节点时触发
private onExpand = (keys) => {
const { loadedKeys, expandedKeys } = this.state
let newLoadKeys = loadedKeys
// 判断当前是展开还是收起节点,当前展开的长度比之前的少,说明是收起。
if (expandedKeys.length > keys.length) {
// 当是收起的时候,把这个收起的节点从loadedKeys中移除
newLoadKeys = loadedKeys.filter((i) => keys.includes(i))
}
this.setState({
expandedKeys: keys,
loadedKeys: newLoadKeys
})
}
// 节点加载完毕时触发
private onLoad = (loadedKeys) => {
this.setState({ loadedKeys })
}
注意:
TreeNode中的isLeaf要设置为false,不然当第一次加载后,如果没有子节点,那么它前面的那个加载箭头就会消失。