javascript - 导航离开后间隔未清除

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);
  }, []);