React+TypeScript项目Chrome控制台console.log()重复打印两次问题

• 优先排查React严格模式影响：React 18+ 开发环境默认开启的<React.StrictMode>会在开发态执行双挂载检测，主动重复执行组件渲染、副作用流程来提前捕获不规范代码，这是开发环境专属行为，生产构建后会自动消除。

  快速验证：打开项目根渲染文件（通常是src/main.tsx/src/index.tsx），临时移除根组件外层的<React.StrictMode>包裹，刷新页面后如果日志不再重复，即可确认是该机制导致，无需修改业务代码。

• 排查组件重复渲染问题：打开React DevTools的组件树面板，确认当前页面是否实际挂载了2个InputField组件实例，这类问题通常由路由重复配置、条件渲染逻辑判断错误导致。
• 排查事件重复绑定：检查input标签的事件逻辑，是否同时存在原生addEventListener绑定和React合成事件（如onChange）绑定，或是自定义hooks中封装的事件监听逻辑未在卸载阶段正确清理，导致输入一次触发两次回调。
• 排查副作用依赖问题：如果console.log()写在useEffect中，检查依赖数组是否配置正确：若漏写依赖、或是依赖为每次渲染都会重新生成的未缓存引用类型（对象、函数未经过useMemo/useCallback包裹），会导致effect在单次输入后被重复触发，打印重复日志。

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