React中使用setInterval每秒触发函数执行无效果问题求助

问题原因 #

问题出在useEffect中setInterval的回调函数写法上。你当前写的是() => getNewNr，这个箭头函数仅返回了getNewNr的函数引用，没有实际执行该函数，因此更新状态的setNumber逻辑从未触发，数值就一直停留在初始值0。

修复方案 #

你可以任选下面一种写法修正错误：

• 直接将getNewNr作为回调传入setInterval，无需额外包裹箭头函数：

const interval = setInterval(getNewNr, 1000)

• 如果后续需要在回调中添加额外逻辑，就在箭头函数内执行getNewNr：

const interval = setInterval(() => getNewNr(), 1000)

补充说明 #

如果后续你修改getNewNr后，函数依赖了组件内的其他状态/属性，需要记得将对应的依赖项加入useEffect的依赖数组，或者用useRef缓存函数引用，避免定时器出现逻辑异常。

内容的提问来源于stack exchange，提问作者Gustavo