组件卸载时停止 setInterval()？（反应）

Question

我希望在我网站上的用户更改页面时停止间隔功能。我在网上搜索“如何判断一个反应元素是否在屏幕上可见”，但我只能找到交集观察者的结果。当反应组件卸载时，有没有办法停止间隔功能？（ps。我相信卸载是在组件不再渲染时？）

这是我的组件间隔：

useEffect(() => {
   const updatePostInfo =
     inView &&
      setInterval(() => {
        dispatch(getPostInfo(data._id));
  }, 3500);
!inView && clearInterval(updatePostInfo);
}, [inView]);

目前，我已经为它设置了一个路口观察器，这样它就不会在函数不可见时分派函数。但是当页面改变时间隔仍然运行？

Answer 1

没关系，我弄明白了，哈哈，我刚刚了解到 useEffect() 的 return () => 函数基本上是 componentWillUnmount 部分。

来源：tutorial

  useEffect(() => {
    const updatePostInfo =
      inView &&
      setInterval(() => {
        dispatch(getPostInfo(data._id));
      }, 3500);
    !inView && clearInterval(updatePostInfo);
    return () => {
      clearInterval(updatePostInfo);
    };
  }, [inView]);

Answer 2

您需要return一个清理效果的函数：

useEffect(() => {
  const updatePostInfo = setInterval(() => {
    dispatch(getPostInfo(data._id));
  }, 3500);
  return () => clearInterval(updatePostInfo);
}, []);

组件卸载时停止 setInterval()？（反应）

Stop setInterval() when Component Unmounts? (React)

javascript

intervals

reactjs

组件卸载时停止 setInterval()？ （反应）

Stop setInterval() when Component Unmounts? (React)

javascript

intervals

reactjs

组件卸载时停止 setInterval()？（反应）