setInterval

Question

我的 React 应用程序中有一个 setTimer 函数，它使用 setInterval 挂钩来增加我的 sec 变量。

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

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

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

我最近才开始学习一般的反应和 js，所以这可能是一个非常明显的答案，但看在上帝的份上我可以弄明白。我怎样才能避免这个错误？

Answer 1

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

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

setInterval - 'interval' 未定义

setInterval - 'interval' is not defined

javascript

time

reactjs