React Native中静态函数被调用两次问题求助

我之前也碰到过类似的情况，结合你说的栈追踪都指向App.js的componentDidMount()，给你几个具体的排查方向和解决方案：

1. 先排查React严格模式的影响 #

这是React 18+开发环境下最容易踩的坑！React的<React.StrictMode>在开发模式下，会刻意重复调用componentDidMount、useEffect这类生命周期方法，目的是帮你检测那些没有正确清理的副作用。

你可以去项目的入口文件（比如index.js）看看，是不是用<React.StrictMode>把<App />包裹起来了？如果是的话，开发环境下你的IAP方法就会被调用两次，但生产环境打包后就不会有这个问题。

验证方法：暂时注释掉StrictMode，重新启动项目，再看断点是不是只触发一次。

2. 检查IAP类是否被重复加载 #

有时候如果你的IAP类在不同地方用了不同的相对路径import（比如在A组件里写./utils/IAPM，在B组件里写../utils/IAPM），打包工具可能会把它当成两个独立的模块，导致类被初始化两次，静态方法自然也会被调用两次。

你可以在IAP类的顶部加一行console.log('IAP类初始化啦')，然后看控制台是不是输出了两次。如果是这种情况，统一一下所有import的路径写法就行。

3. 梳理componentDidMount里的隐藏逻辑 #

虽然你说代码里只调用了一次IAP方法，但可以再仔细检查下componentDidMount里的代码：

• 有没有异步操作（比如请求接口）完成后，又间接触发了IAP方法？
• 有没有订阅某个状态（比如Redux、Context的状态），而状态在componentDidMount里被更新了两次，导致回调触发？
• 会不会是复制粘贴的时候不小心多写了一次调用？

4. 排除Chrome调试的热重载干扰 #

有时候在开发过程中，代码热重载会导致页面重新执行componentDidMount，如果刚好断点没关掉，就会看起来像是触发了两次。你可以试试完全刷新页面，不要修改代码，看看断点是不是只触发一次。

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