Javascript 反应倒计时计时器无法执行停止功能_Javascript_Reactjs_React Native_React Hooks

Javascript 反应倒计时计时器无法执行停止功能

javascript reactjs react-native

Javascript 反应倒计时计时器无法执行停止功能,javascript,reactjs,react-native,react-hooks,Javascript,Reactjs,React Native,React Hooks,我几乎是个新手。在这个应用程序中，我正在使用挂钩！我做了一个倒计时，登录后几秒钟就会显示出来。我无法让它停止在一个按钮点击。我需要一些建议，因为在过去的两天里我一直在努力解决这个问题。这是我目前的代码：（请帮助）函数管理（）{ const[isTimerOpen，setTimmer]=useState（false）；让历史=使用历史（）； //由管理员设置 var minutesToCountDown=0.9； //转换成秒 var transformMinutesToSeconds=m

我几乎是个新手。在这个应用程序中，我正在使用挂钩！我做了一个倒计时，登录后几秒钟就会显示出来。我无法让它停止在一个按钮点击。我需要一些建议，因为在过去的两天里我一直在努力解决这个问题。这是我目前的代码：（请帮助）

函数管理（）{
const[isTimerOpen，setTimmer]=useState（false）；
让历史=使用历史（）；
//由管理员设置
var minutesToCountDown=0.9；
//转换成秒
var transformMinutesToSeconds=minutesToCountDown*60
//保持状态
const[counterValue，setCounterValue]=useState（0）；
const[isTimmerStoped，setStopTimer]=useState（false）；
//函数每1秒发生一次
函数timeIt（）{
如果（ISTIMERSTOPED===false）{
转换分钟秒--
setCounterValue（transformMinutesToSeconds）
log（“计时器开启：”，transformMinutesToSeconds）
如果（transformMinutesToSeconds===0）{
清除间隔（间隔）
setStopTimer（真）
}
}否则{
setStopTimer（真）
清除间隔（间隔）
}
}
//开始倒计时
var区间；
常量开始计数=（）=>{
间隔=设置间隔（timeIt，1000）
}
常量停止倒计时=（）=>{
日志（“停止计时器”）
设置停止计时器（真）；
设置计数器值（0）；
setTimmer（假）；
}
//在剩余时间的前面添加0
常量addLeadingZeros=值=>{
值=字符串（值）；
while（value.length<2）{
value=`0${value}`；
}
返回值；
};
//将秒转换为剩余时间
功能转换秒（秒）{
var min=数学地板（秒/60）；
var秒=秒%60；
返回addLeadingZeros（最小值）+'：'+addLeadingZeros（秒）
}
const logOutUser=（）=>{
注销（）；
返回历史。推送（主路线）
}
函数setTimer（）{
常量计时器=设置超时（（）=>{
setTimmer（真）
console.log（'这将在3秒后运行！'）
开始计数（）
}，会话超时）；
return（）=>clearTimeout（计时器）；
}
useffect（（）=>{
如果（ISTIMERSTOPED===false）{
console.log（'效果开始'，停止）
setTimer（）
}否则{
console.log（“效果停止”，已停止）
停止倒计时（）
}
}，[IstimmerStopped，setStopTimer，minutesToCountDown]）；
返回
}
导出默认管理员；

您不应该在函数变量中维护setInterval返回的intervalId，因为它将在重新渲染时重置，并且您将丢失实际的计时器Id。您必须使用

useRef

钩子来存储timerId

   const interval = useRef(null);
    ...
   function timeIt() {
        if (isTimmerStoped === false) {
            transformMinutesToSeconds--
            setCounterValue(transformMinutesToSeconds)
            console.log("Timer is on: ", transformMinutesToSeconds)

            if (transformMinutesToSeconds === 0) {
                clearInterval(interval.current)
                setStopTimer(true)
            }
        } else {
            setStopTimer(true)
            clearInterval(interval.current)
        }
    }
    ...
   // STARTS THE COUNTDOWN
    const startCountdown = () => {
        interval.current = setInterval(timeIt, 1000)
    }

您不应该在函数变量中维护setInterval返回的intervalId，因为它将在重新渲染时重置，并且您将丢失实际的计时器Id。您必须使用

useRef

hook来存储timerId

   const interval = useRef(null);
    ...
   function timeIt() {
        if (isTimmerStoped === false) {
            transformMinutesToSeconds--
            setCounterValue(transformMinutesToSeconds)
            console.log("Timer is on: ", transformMinutesToSeconds)

            if (transformMinutesToSeconds === 0) {
                clearInterval(interval.current)
                setStopTimer(true)
            }
        } else {
            setStopTimer(true)
            clearInterval(interval.current)
        }
    }
    ...
   // STARTS THE COUNTDOWN
    const startCountdown = () => {
        interval.current = setInterval(timeIt, 1000)
    }

你应该做两件事

将

interval

变量设为ref。这样，它的值在导入的每个位置都是唯一的。注意：只在组件上方创建一个变量是个坏主意，因为该变量将在导入

Admin

组件的每个组件之间共享，这将导致错误

错

let间隔；
函数Admin（）{
//…这里是代码
//开始倒计时
//变量间隔；从此处删除
常量开始计数=（）=>{
间隔=设置间隔（timeIt，1000）
}
//…这里是代码
}
导出默认管理员；

赖特

函数管理（）{
const interval=React.useRef（）；
//…这里是代码
//开始倒计时
//变量间隔；从此处删除
常量开始计数=（）=>{
interval.current=setInterval（timeIt，1000）
}
//…这里是代码
}
导出默认管理员；

将

clearInterval

添加到

stopCountdown

函数中。您可以在

timeIt

功能中删除clearInterval，并将其移到

stopCountdown

中。请看一看我做的演示

const stopCountdown=（）=>{
日志（“停止计时器”）
设置停止计时器（真）；
设置计数器值（0）；
setTimmer（假）；
clearInterval（interval.current）//在此处清除间隔
}