处理多个 useEffect 挂钩

Question

我在一个组件中多次调用 useEffect 钩子

useEffect(() => {
  getData(id);
}, [getData, id]);

const reqBody = useMemo(
  () => ({
    item: data?.item,
  }), [data?.item]
);

useEffect(() => {
  if (data?.item) {
    getAnotherData(reqBody);
  }
}, [getAnotherData]);

从代码 sn-p 中可以看出，第一个 useEffect hook 调用了一个名为 getData 的函数，该函数将数据存储在 redux store 中，第二个 hook 中函数 getAnotherData 的 reqBody 依赖于第一个 hook。 因此，即使 store 中的 data 尚未更新，第二个钩子也会运行，从而导致多个 api 调用。 如何避免这种情况，以便仅在更新商店中的data 时调用函数getAnotherData？

Answer 1

在依赖数组中使用data，而不是在第二个useEffect钩子中使用getAnotherData。

useEffect(() => {
  getData(id);
}, [getData, id]);

const reqBody = useMemo(
  () => ({
    item: data?.item,
  }), [data?.item]
);

useEffect(() => {
  if (data?.item) {
    getAnotherData(reqBody);
  }
}, [data]);