在 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”警告？如何避免？

回答与解析：

该警告通常发生在组件已经卸载（unmounted）后，异步操作（如 setTimeout、fetch 请求、Promise 等）仍在尝试更新组件的状态。由于组件已不存在，React 无法安全地执行 setState，因此发出警告。

原因示例：

useEffect(() => {
  const fetchData = async () => {
    const data = await api.getData();
    setData(data); // 如果组件已卸载，此处会触发警告
  };
  fetchData();
}, []);

解决方法：

1. 使用 isMounted 标志（推荐方式）：

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    const data = await api.getData();
    if (isMounted) {
      setData(data);
    }
  };
  fetchData();
  return () => {
    isMounted = false; // 组件卸载时设置为 false
  };
}, []);

2. 使用 AbortController（适用于 fetch）：

useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    try {
      const response = await fetch('/api/data', { signal: controller.signal });
      const data = await response.json();
      setData(data);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Fetch error:', error);
      }
    }
  };
  fetchData();
  return () => {
    controller.abort(); // 取消请求
  };
}, []);

3. 使用自定义 Hook 封装逻辑（如 useAsyncEffect）可复用解决方案。

核心思想：在组件卸载后，避免对状态进行更新，可通过清理函数控制异步操作的结果是否应用。