使用标志React切换按钮

Question

按下按钮时，调用toggleTimer()函数。现在，当我按下这个按钮时，它暂停立即，然而，当我按下按钮第二次，它做而不是unpause立即。我们的目标是让按钮在按下后立即在这两种状态之间切换。

当我运行程序时，我注意到奇怪的是，在我得到取消暂停行为之前，我必须多次按下按钮。我认为这是由于let paused=true全局变量，但我不确定如何解决这个问题。

///////PAUSE TIMER/////////////////
let paused = true;
let holdValue;
function toggleTimer(){
if (paused===true){ // if paused, we clear timer and save value
paused = false; 
holdValue= remainingTime;
clearInterval(timerRef.current);
} else if (paused===false) { //if not paused, we can restart timer using our saved value
paused = true; 
startTimer(); // call our function to start timer
setRemainingTime(holdValue); // update the remaining time using our saved value
}
}

Answer 1

我相信你是对的，全局变量使行为怪异。

所以解决方案是在你的按钮组件中使用一个状态:

const [paused, setPaused] = useState(false)

然后你应该将它与处理计时器的useEffect结合起来(我不确定我是否理解正确，但你应该能够根据你的需要调整它):

const Example = () => {
const [paused, setPaused] = useState(false);
useEffect(() => {
let timer;
if (!paused) {
timer = setInterval(() => {
// Do something
}, 10000);
} else {
clearInterval(timer);
}
return () => clearInterval(timer);
}, [paused]);
return <Button onClick={() => setPaused(!paused)}>Button</Button>;
};

这里当paused为假时，计时器(interval)将调用执行它的回调(//做某事)每10秒，然后当你点击按钮暂停更改为假，所以使用效果被执行，时间它清除定时器。如果你想重新开始，然后点击和按钮，这将改变暂停状态和useEffect将重新启动间隔。