为何未触发React“无法在已卸载组件上更新状态”错误？

问题背景 #

学习《React与React Native第4版》“取消请求与重置状态”章节时，按书中要求注释掉promise.cancel()，本应触发组件卸载后更新状态的错误，但实际未出现预期结果。

可能原因及解决步骤 #

• React版本兼容问题：React 18+默认开启严格模式，会自动抑制组件卸载后的状态更新警告，甚至内部做了容错处理。可以移除React.StrictMode的包裹后重新测试。
• 自定义Promise取消逻辑未生效：示例中的promise.cancel()属于自定义扩展，并非原生Promise API。如果环境没实现这个方法，注释掉它不会真正阻止请求完成后的状态更新，反而可能因缺少取消标记，让React跳过错误检测。
• 组件卸载时机不精准：测试时可能没在请求响应返回前及时卸载组件。可以在请求里加setTimeout模拟慢请求（比如延迟3秒），然后快速切换路由或卸载组件，确保响应返回时组件已被移除。
• 控制台警告被过滤：部分浏览器会默认隐藏部分React警告，需打开控制台的“Verbose”模式，确保“Warnings”和“Errors”选项都已勾选。

验证操作 #

1. 临时移除项目中React.StrictMode的包裹代码，重新运行项目。
2. 修改请求函数添加延迟，示例代码：

   const fetchData = () => {
     return new Promise(resolve => {
       setTimeout(() => resolve({ data: '测试数据' }), 3000);
     });
   };
   

3. 请求发出后立即卸载组件（比如点击跳转按钮切换页面），等待3秒后查看控制台输出。

内容的提问来源于stack exchange，提问作者Harsh Shah