React调用API时then块触发两次、请求重复发送问题排查

问题原因 #

• 首先这是React**开发环境下严格模式（StrictMode）**的刻意行为：如果你的项目根组件外层包裹了<React.StrictMode>标签，React 16.3+的开发环境中会故意调用两次组件的render方法，目的是帮你提前发现写在render里的不合理副作用（比如你这次测试用的API调用）。
• 你看到Send request ...只打印一次，是浏览器控制台默认开启了「重复日志合并」的功能，两次完全相同的文本日志被自动折叠了。你可以修改日志内容带上可变参数（比如时间戳console.log('Send request ...', Date.now())），就能看到两条独立的请求日志，和两次render调用对应。
• 两次响应日志没有被合并，是因为两次请求返回的响应是不同的对象引用，控制台不会合并对象类型的输出，所以你能清晰看到两次响应结果。同时网络面板的两次GET请求、服务端两次执行逻辑也和两次render触发两次API调用的行为完全对应。

验证方法 #

你可以关闭浏览器控制台的「合并相似消息」设置（Chrome路径为控制台右上角设置按钮→Console分类下取消勾选「Group similar」），即可看到完整的两次render日志、两次请求发送日志，和你当前看到的两次响应日志一一对应。

补充说明 #

这个重复执行的行为仅存在于开发环境，生产环境构建后StrictMode不会触发两次render，不会出现该问题。当然正如你已知的，不要在render方法中放置API调用这类副作用操作，常规场景下请将请求放在componentDidMount生命周期钩子中执行。

内容的提问来源于stack exchange，提问作者Manolis P.