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

Question

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

useEffect

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

one

、

two

、

three

和

four

。

Here's the code I'm currently using

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]);