ドキュメントの内容によると:
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[] = [];
置き換えました。識別子. 目的は待つことです useMemo 関数を再度実行します const [defaultData, setDefaultData] = useState<DataNode[]>([])
const isflag = React.useRef(0);
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]);