在 React 中使用 useEffect 时，为什么有时会出现“Can't perform a React state update on an unmounted component”的警告？如何避免？

在 React 中使用 useEffect 时，为什么有时会出现“Can't perform a React state update on an unmounted component”的警告？如何避免？

回答与解析：

这个问题通常出现在组件卸载后，异步操作（如 API 请求、定时器等）仍在执行，并尝试调用 setState（或通过 useState 返回的 setter 函数）更新状态。

React 在组件卸载后会将内部的 fiber 树标记为无效，此时若再尝试更新状态，就会触发警告：“Can't perform a React state update on an unmounted component”。虽然这不会导致应用崩溃，但属于内存泄漏风险，应予以修复。

常见场景示例：

useEffect(() => {
  let isMounted = true;
  fetchData().then(data => {
    if (isMounted) {
      setData(data);
    }
  });
  return () => {
    isMounted = false;
  };
}, []);

解决方法：

1. 使用 isMounted 标志（适用于简单场景）
   在 useEffect 中定义一个布尔变量（如 isMounted），在组件卸载时通过 cleanup 函数将其设为 false。在异步回调中先检查该变量再更新状态。

2. 使用 AbortController（推荐用于 fetch 请求）
   利用 AbortController 取消未完成的请求：

   useEffect(() => {
     const controller = new AbortController();
     fetch('/api/data', { signal: controller.signal })
       .then(res => res.json())
       .then(data => setData(data))
       .catch(e => {
         if (e.name !== 'AbortError') console.error(e);
       });
   
     return () => controller.abort();
   }, []);
   

3. 使用自定义 Hook 封装逻辑（如 useAsync 或 useMounted）
   可以抽象出通用逻辑避免重复代码。

最佳实践：

• 对所有可能在组件卸载后仍执行的异步副作用进行清理。
• 优先使用 AbortController 处理网络请求。
• 避免在 useEffect 中启动无法取消的异步操作（如未清理的 setTimeout/setInterval）。

通过以上方式，可有效避免该警告并提升应用健壮性。