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

Question

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

这是我的组件间隔：

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

目前，我已经为它设置了一个交叉观察器，这样当它不可见时它就不会调度该函数。但是页面变化时间隔仍然运行？

Answer 1

您需要从效果中返回一个清理函数：

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