处理多个useEffect挂钩

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存储中，而第二个钩子中函数getAnotherData的reqBody取决于第一个钩子。因此，即使存储中的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]);