如何在所有依赖更新后才调用useEffect中的API？

Question

我正在开发一个 React 组件，我需要在

useEffect

钩子中的所有依赖项更新后调用 API。我有四个依赖项：

one

、

two

、

three

和

four

。

这是我当前使用的代码：

useEffect(() => {
  api(one, two, three, four);
}, [one, two, three, four]);

但是，问题是只要任何依赖项发生变化，这个

useEffect

钩子就会触发 API 调用，从而导致多个 API 调用。

我想要实现的是等到所有依赖项都已更新后再进行 API 调用。如何确保仅在所有依赖项都有更新值后才调用 API？

Answer 1

您可以使用 useRef 挂钩来跟踪依赖项的先前值，允许您将当前值与先前值进行比较，然后仅在所有更新后调用 api，如下所示：

const prevDeps = useRef({ one, two, three, four });

useEffect(() => {
  const hasAllUpdated = (
    prevDeps.current.one !== one &&
    prevDeps.current.two !== two &&
    prevDeps.current.three !== three &&
    prevDeps.current.four !== four
  );

  if (hasAllUpdated) {
    api(one, two, three, four);
  }

  prevDeps.current = { one, two, three, four };
}, [one, two, three, four]);