Question

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

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

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

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

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

Answer 1

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

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

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

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

处理多个 useEffect 钩子

1 个答案: