# 警告：无法在已卸载的组件上执行 React 状态更新。这是一个空操作，但表明您的应用程序中存在内存泄漏。要修复，请在 useEffect 清理函数中取消所有订阅和异步任务。

- **ID:** `react/setstate-on-unmounted-component-with-async`
- **领域:** react
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 90%

## 根因

异步操作（例如 fetch、timeout）在组件卸载后完成，回调尝试在已卸载的组件上设置状态。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| React 18.2.0 | active | — | — |
| React 19.0.0 | active | — | — |
| React 16.14.0 | active | — | — |

## 解决方案

1. ```
   Use an AbortController with fetch and call abort() in the useEffect cleanup: `const controller = new AbortController(); useEffect(() => { fetch(url, { signal: controller.signal }); return () => controller.abort(); }, []);`
   ```
2. ```
   For timeouts, use clearTimeout in cleanup: `useEffect(() => { const timer = setTimeout(() => setState(...), 1000); return () => clearTimeout(timer); }, []);`
   ```
3. ```
   Use a library like `use-http` or `react-query` that handles cancellation automatically.
   ```

## 无效尝试

- **** — The async task still executes, wasting resources; React recommends cleanup instead. (90% 失败率)
- **** — It can lead to memory leaks and unpredictable behavior in production, especially with frequent mount/unmount cycles. (95% 失败率)