在 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）后，异步操作（如 API 请求、定时器等）仍在尝试更新组件的状态。由于 React 无法对已卸载的组件进行状态更新，因此会发出此警告。

解析：
useEffect 中启动的异步任务（如 fetch 请求、setTimeout、事件监听器等）在其回调中可能会调用 setState。如果组件在这些异步任务完成前被卸载，setState 就会作用于一个不存在的组件，从而触发警告。

解决方法：

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

useEffect(() => {
  let isMounted = true;

  fetchData().then(data => {
    if (isMounted) {
      setData(data);
    }
  });

  return () => {
    isMounted = false;
  };
}, []);

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

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

  fetch('/api/data', { signal: abortController.signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(e => {
      if (e.name !== 'AbortError') {
        console.error(e);
      }
    });

  return () => {
    abortController.abort();
  };
}, []);

3. 清除定时器或取消订阅（如使用 setInterval、WebSocket 等）：

useEffect(() => {
  const timer = setInterval(() => {
    // do something
  }, 1000);

  return () => clearInterval(timer);
}, []);

核心原则是：在组件卸载时清理所有可能引起状态更新的异步副作用。这不仅能避免警告，还能防止内存泄漏和不必要的渲染。