Javascript 如何在React+；重演

我正在React中编写一个增量风格的游戏，我在

App.ts:

useffect（（）=>{
常量循环=设置间隔（（）=>{
如果（运行状态）{
设置时间（时间+1）；
}
}，比率）；
返回（）=>clearInterval（循环）；
});

我还提供了各种事件处理程序，包括：

increment（计数器+1）}>increment

不幸的是，如果我在一秒钟内多次单击该按钮，它将阻止setInterval更新

时间

状态

此状态使用挂钩以及Redux存储状态

至少，我怎样才能使我的设置间隔可靠地运行，这样我就可以在不阻塞页面的情况下单击页面？

这样做

[]

空依赖项表示仅在组件将装入时执行

useEffect(() => {
    const loop = setInterval(() => {
      if (runStatus) {
        setTime(prev => prev + 1);
      }
    }, rate);

    return () => clearInterval(loop);
}, []); <--- add that []

useffect（（）=>{
常量循环=设置间隔（（）=>{
如果（运行状态）{
设置时间（prev=>prev+1）；
}
}，比率）；
返回（）=>clearInterval（循环）；
}, []);  那样做

[]
空依赖项表示仅在组件将装入时执行

useEffect(() => {
    const loop = setInterval(() => {
      if (runStatus) {
        setTime(prev => prev + 1);
      }
    }, rate);

    return () => clearInterval(loop);
}, []); <--- add that []

useffect（（）=>{
常量循环=设置间隔（（）=>{
如果（运行状态）{
设置时间（prev=>prev+1）；
}
}，比率）；
返回（）=>clearInterval（循环）；
}, []); 尝试将
[]
作为
useffect
的依赖项。否则，每次状态更改时，都会生成新的间隔。请尝试将
[]
作为
useffect
的依赖项。否则，每次状态更改时，都会生成一个新的间隔。这将在每次重新渲染时运行。这是你想要的吗？你的iLife和
async
在这里没有做任何有用的事情，你只需要
[]
就可以了。@Keith得到了，我会把它删除的。太棒了，我做到了。感谢@Nishargshah+其他人：）如果
runStatus
或
rate
发生变化怎么办？想必它们可以，否则它们将被硬编码。它们应该包含在依赖项数组中。这将在每次重新渲染时运行。这是你想要的吗？你的iLife和
async
在这里没有做任何有用的事情，你只需要
[]
就可以了。@Keith得到了，我会把它删除的。太棒了，我做到了。感谢@Nishargshah+其他人：）如果
runStatus
或
rate
发生变化怎么办？想必它们可以，否则它们将被硬编码。它们应该包含在依赖项数组中。