在 React 中完成两个或多个异步函数后执行函数的最佳方法是什么？

Question

我有两个函数 运行 从 API 异步获取数据。它们都是从它们自己的 useEffect() 中调用的。

我有第三个功能需要 运行 一旦这两个功能完全完成。

如何实现？

编辑： 两个异步函数如下所示：

   useEffect(() => {
    fetchBudgetBucketsData();
  }, [fiscalYear]);

  useEffect(() => {
    fetchBudgetBucketsData();
  }, [fiscalYear]);

 const fetchBudgetsData = async () => {
    setIsFetchingBudgets(true);
    const res = await getBudgets(orgID, `${parseInt(fiscalYear)}`, '', budgetType);
    setIsFetchingBudgets(false);
    if (isErrorResponse(res)) {
      console.warn(res.details);
      message.error(res.displayText);
      return;
    }
    setBudgets(res.budgets);
  };

 const fetchBudgetBucketsData = async () => {
    setIsLoadingBudgetBuckets(true);
    if (orgID === undefined) {
      return;
    }

    const res = await getBudgetBuckets(orgID, fiscalYear);
    setIsLoadingBudgetBuckets(false);
    if (isErrorResponse(res)) {
      console.warn(res.details);
      message.error(res.displayText);
      return;
    }
    setBudgetBuckets(res.buckets);
  };

每当更新预算数据或桶数据时，我想调用另一个函数来检查错误。但是，当页面加载时，我需要它在检查错误之前等待这两个函数完成。

编辑#2：

经过一些调试，看起来问题可能与 React 何时更新状态有关。由于我正在尝试检查状态中保存的数据是否有错误。

Answer 1

一种方法是链接 Promise。

Promise.all([ApiCall1, ApiCall2])
// At this point two promises above will be resolved
.then(() => ApiCall3)

Read more

Answer 2

我发现这个问题是由 React 如何选择何时更新状态而不是我如何异步调用这些函数引起的。

我能够通过将错误检查功能挂钩到数据获取调用的输出中来调用它。这确保错误检查仅在预算或桶被编辑并完成更改时运行。

useEffect(() => {
    getWarningsAndErrors();
  }, [budgets, budgetBuckets]) //Update errors whenever we edit budgets or buckets