React项目中setInterval每次超时执行两次问题求助

核心原因：React严格模式（Strict Mode）的开发环境行为 #

在React开发环境中，Strict Mode会刻意重复执行部分核心逻辑，用于检测代码中的潜在问题，包括：

• 组件初始化相关函数
• useEffect的回调函数

你的代码中，useEffect依赖数组为空[]，本应在组件挂载时执行一次，但在Strict Mode的作用下，这个useEffect会被执行两次，直接创建了两个独立的setInterval定时器实例。每个定时器都会每秒触发一次回调逻辑，最终表现为状态数组每次被添加两个值。

次要隐患：未清理定时器 #

你的useEffect没有返回清理函数来执行clearInterval(interval)。即使没有Strict Mode的影响，组件卸载时定时器会持续在后台运行造成内存泄漏；而在Strict Mode下，两次创建的未清理定时器会进一步加剧重复执行的问题。

代码中的额外问题（非直接诱因，但需修正） #

• 操作labels.current时，length>10的分支错误使用dataSet.slice（应改为labels.current.slice），还错误赋值给labels.current.value（useRef的当前值需通过current属性访问，不存在value属性）。
• 外层操作labels.current时依赖了dataSet的闭包值，可能导致标签与数据不同步。

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