根据文档的内容:
在 3.4.0 之前:树节点可以有很多,但在设置 checkable 时,将会花费更多的计算时间,因此我们缓存了一些计算结果(this.treeNodesStates)来复用,避免多次重复计算,以此提高性能。但这也带来了一些限制,当你异步加载树节点时,你需要这样渲染树:
{
this.state.treeData.length ? (
<Tree>
{
this.state.treeData.map((data) => (
<TreeNode />
))}
</Tree>
) : (
'loading tree'
);
}
解决办法:
const treeData = useMemo(() => {
//新增一个defaultData函数会一直循环,所以就defaultData.length
}, [defaultData.length, searchValue]);
{
treeData?.length ? (
<Tree
onExpand={
onExpand}
expandedKeys={
expandedKeys}
autoExpandParent={
autoExpandParent}
treeData={
treeData}
defaultExpandAll={
true}
/>
) : (
'loading tree'
)
}
下面是自己没看文档最下面的内容,自己折腾了几天的愚蠢操作:
首先是删掉了generateData(z)初始化数据的函数,然后把const defaultData: DataNode[] = [];
换成 const [defaultData, setDefaultData] = useState<DataNode[]>([])
,新增了一个const isflag = React.useRef(0);
标识符,目的是等会再次执行useMemo函数
const treeData = useMemo(() => {
getorganizationsRelations().then((res) => {
//在接口里获取到想要的数据
setDefaultData(data)
})
if (defaultData?.length !== 0 && defaultData?.length !== undefined) {
// 执行generateList函数返回loop()函数
generateList(defaultData)
return loop(defaultData);
} else {
//一开始defaultData是[],所以先执行这一步,让 isflag.current 的值发生变化,然后再次执行useMemo函数,此时defaultData就会有值走上面
isflag.current = 1
}
}, [isflag.current, searchValue]);