应该使用async函数和Promise来等待BE返回的数据

Question

我有一棵树，所以当用户单击根时，表格将自动显示该根节点的第一项。

当用户点击太快时（甚至在 API 树返回包含第一项的数据之前），就会出现问题。

所以我想出了这个主意：

所以我想出了这个主意

const getFirstItemAsync = useCallback(async () => {
    while (isEmpty(tree?.[0]?.items)) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
    return tree?.[0]?.items?.[0];
  }, [tree]);

这是我获取数据树的函数

const loadItemsFn = useCallback(
    (item: A, targetId: string, isExpand: boolean = true) => {
      if (loadItems) {
        loadItems(params).then(
          (data: ITreePayload<ITreeItem>) => {
            setTree(data)
          }
        );
      }
    },
    [loadItems, tree ]
  );

但是，我认为有一种方法可以跟踪 API 调用何时准备好并等待 API 返回。

Answer 1

您可以执行以下操作

const [isTreeLoading, setIsTreeLoading] = useState(false);
const loadItemsFn = useCallback(
    (item: A, targetId: string, isExpand: boolean = true) => {
      if (loadItems) {
        setIsTreeLoading(true);
        loadItems(params).then(
          (data: ITreePayload<ITreeItem>) => {
            setTree(data)
          }
        ).finally(()=>{
          setIsTreeLoading(false);
        })
      }
    },
    [loadItems, tree ]
  );

// now you can use the isTreeLoading variable whenever you want to