setInterval - 'interval' 未定义答案

【问题标题】：setInterval - 'interval' is not definedsetInterval - 'interval' 未定义
【发布时间】：2021-09-24 15:31:12
【问题描述】：

我的 react 应用中有一个 setTimer 函数，它使用 setInterval 钩子来增加我的 sec 变量。

  function setTimer() {
    if (!started) {
      setStarted(true);
      const interval = setInterval(() => {
        setSec(prevProps => {
          return {sec: prevProps.sec+1}
        })
      }, 1000)
    }
  }

但是在这个方法之上，我有一个onFinish 方法，它在满足条件时被调用。在这种方法中，我使用clearInterval 并通过interval。现在，当我使用类组件时，这可以正常工作，因为我可以访问this。但是现在我已经从类组件切换到了功能组件。而且我认为程序无法识别我的interval 变量。

 function onFinish() {
    if (text.length-1 === symbols) {
      clearInterval(interval);
      setPopup(true)
      setFinished(true)
      setStarted(false)
    }
  }

我最近才开始学习一般的 react 和 js，所以这可能是一个非常明显的答案，但看在上帝的份上，我可以弄清楚。如何避免此错误？

【问题讨论】：

const interval 在setTimer 函数之外不可见（甚至在声明它的if 之外）。您需要一个可以在这两者之间共享的变量或属性。

标签： javascript reactjs time setinterval

【解决方案1】：

const 是块范围的，所以你的变量在花括号之外是不可访问的：{}.

 let interval = null;
 function setTimer() {
    if (!started) {
      setStarted(true);
     interval = setInterval(() => {
        setSec(prevProps => {
          return {sec: prevProps.sec+1}
        })
      }, 1000)
    }
  }

【讨论】：

问题，什么会让 interval = useRef(null);做什么？
useRef 用于您希望在组件的生命周期内在重新渲染之间保留的值。如果您的状态在您想要使用 clearInterval 时没有更新，您可以省略它并简单地使用一个变量。
我以同样的方式编辑了代码。如果你觉得你的组件会在两者之间重新渲染，那么你将不得不使用 useRef 我会相应地进行编辑。
好的。这就说得通了。顺便说一句，我会在 8 分钟后接受这个帖子，因为 SO 有一些奇怪的冷却时间