如何在 React 中正确地处理异步数据加载时的组件卸载，以避免“Can't perform a React state update on an unmounted component”警告？

如何在 React 中正确地处理异步数据加载时的组件卸载，以避免“Can't perform a React state update on an unmounted component”警告？

回答与解析：

该警告通常出现在组件已卸载后，异步操作（如 fetch、setTimeout、Promise）仍然尝试调用 setState（或 useState 的更新函数）的情况。为了避免此问题，可以在组件卸载时取消异步操作或使用一个“mounted”标志来判断组件是否仍处于挂载状态。

解决方案一：使用 useRef 和 useEffect 清理函数（推荐）

import { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('/api/data').then(res => res.json());
      if (isMounted.current) {
        setData(result);
      }
    };

    fetchData();

    // 清理函数：组件卸载时将 isMounted 设为 false
    return () => {
      isMounted.current = false;
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

解决方案二：使用 AbortController（适用于 fetch）

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data', { signal: controller.signal });
      const result = await response.json();
      setData(result);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Fetch error:', error);
      }
    }
  };

  fetchData();

  return () => {
    controller.abort(); // 取消未完成的请求
  };
}, []);

核心原理：
React 组件卸载后不应再更新其状态。通过在 useEffect 的清理函数中设置标志位或中止请求，可有效防止对已卸载组件的状态更新，从而消除警告并提升应用健壮性。在现代 React 开发中，使用 AbortController 是处理 fetch 请求取消的最佳实践；而对于非 fetch 的异步操作（如 setTimeout、自定义 Promise），则推荐使用 isMounted 标志。