React中使用console.log(current)时输出两个相同值的问题咨询

问题原因 #

你遇到的是React**严格模式（StrictMode）**在开发环境下的正常行为：

• 为帮开发者提前检测组件潜在的副作用问题，StrictMode会在开发环境中重复执行部分核心函数，包括setState的更新回调、useEffect的首次挂载回调。
• 你的代码里，setInterval的回调被StrictMode触发了两次，导致setCurrentIndex的更新函数连续调用两次。由于两次调用时prev都是同一个初始状态（状态还未完成更新），计算出的current完全相同，因此出现两次重复日志。
• 注意：该重复执行仅发生在开发环境的StrictMode中，生产环境下不会出现此现象。

解决办法 #

根据需求可选以下方案：

方案1：忽略开发环境的重复日志（推荐） #

这是StrictMode的设计初衷，用于提前暴露组件副作用问题。生产环境下该现象会自动消失，若仅为开发时的日志干扰，无需额外处理。

方案2：监听状态变化打印日志 #

若需准确打印状态更新后的结果，建议通过useEffect监听currentIndex的变化，替代在setState更新函数内打印：

// 在组件内新增该useEffect
useEffect(() => {
  console.log(currentIndex);
}, [currentIndex]);

无论setState更新函数被调用几次，只有状态实际完成更新时才会打印一次，结果更准确。

方案3：临时关闭StrictMode（不推荐） #

若必须消除开发环境的重复执行，可在项目入口文件（通常为index.js）中移除<StrictMode>的包裹：

// 原代码示例
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后
root.render(<App />);

不推荐长期使用该方案，因为StrictMode能帮助提前发现大量潜在组件问题，避免上线后出现bug。

方案4：用ref标记首次执行（按需使用） #

若一定要在setState更新函数内打印且避免重复，可通过useRef标记首次执行：

// 在组件内定义ref
const isFirstUpdate = useRef(true);

// 原useEffect中的setCurrentIndex部分修改为
setCurrentIndex((prev) => {
  const current = (prev + 1) % numberOfElements;
  if (process.env.NODE_ENV === 'development' && isFirstUpdate.current) {
    console.log(current);
    isFirstUpdate.current = false;
  }
  // 重置ref，确保下一次interval触发时能正常打印
  setTimeout(() => {
    isFirstUpdate.current = true;
  }, 0);
  return current;
});

该方式需额外处理ref的重置逻辑，仅适合特殊场景使用。

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