Ant design の Tree ツリー コントロール useMemo は最初に初期データを取得してから return を実行します

ドキュメントの内容によると:
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]);

おすすめ

転載: blog.csdn.net/qq_41160739/article/details/128454741