导航离开后间隔未清除

Question

在我导航到 react Web 应用程序中的新页面后，我注意到它继续记录针对我的 API 的获取请求。我尝试添加一些东西以组件卸载在类组件上的工作方式清除它，但它仍然以设定的间隔记录。

有人可以建议我吗？

我尝试过查看其他问题，我尝试过的似乎是答案，但它不起作用。

useEffect(() => {
const fetchData = async () => {
setIsError(false);
try {
const res = await fetch(`http://xxxx`, {
method: "POST",
mode: "cors",
headers: {
"content-type": "application/json",
credentials: "include"
}
});
res.json().then(res => setApiResponse(res));
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
setInterval(fetchData, 3000);
return () => clearInterval(fetchData);
}, []);

我希望它清除间隔并停止"泄漏">

Answer 1

clearInterval需要对区间函数(由setInterval返回(的引用，而不是您从中调用它的函数：

useEffect(() => {
let interval;
const fetchData = async () => {
setIsError(false);
try {
const res = await fetch(`http://xxxx`, {
method: "POST",
mode: "cors",
headers: {
"content-type": "application/json",
credentials: "include"
}
});
res.json().then(res => setApiResponse(res));
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
interval = setInterval(fetchData, 3000); // save the id if the interval
return () => clearInterval(interval);
}, []);