无穷大状态与构件更新

Question

我尝试用useEffect和setInterval创建简单的计时器。理论上，点击它必须：

1. 重新启动冷却 const restartCooldown = () => {setCooldownDuration(靶活动‘持续时间’)}
2. useEffect()将看到这一点，并在间隔内每秒钟减少冷却时间。 useEffect(() ) => {让区间if (props.activity.cooldown) { if (cooldownDuration > 0) { if (props.activity.id === 1) { console.log('Activity.js state'，cooldownDuration) }区间= setInterval(() => setCooldownDuration(cooldownDuration - 1000)，1000)；{clearInterval(区间)}{ setCooldownDuration(0) }}；
3. useEffect()在ActivityProgression.js中将得到完成的百分比 useEffect(() => { const interval = setInterval(() => setPercentages((props.totalTime - props.cooldown) / props.totalTime * 100)，1000)；})
4. 然后它将被渲染

return <ProgressBar animated now={percentages} label={`${percentages}%`} />;    

但实际上，它不能正常工作，在单击时创建无穷多个呈现。

​

​

你能告诉我为什么吗？非常感谢。

完整的代码存储库，让您自己尝试一下

我什么都试过了，但似乎我根本不明白一些反应特征：

Answer 1

useEffect的第二个参数是依赖数组。因为您没有提供任何依赖项，所以它会运行每个呈现。因为它更新了状态，所以它会导致重呈现，从而再次无限地运行。将[cooldownDuration]添加到使用效果中，如下所示：

useEffect(() => {...}, [cooldownDuration])

这将使useEffect只在cooldownDuration更改时运行。