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

常见场景示例：

useEffect(() => {
  let isMounted = true;
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      if (isMounted) {
        setData(data);
      }
    });
  return () => {
    isMounted = false;
  };
}, []);

解决方案：

1. 使用 isMounted 标志（如上所示）：在组件卸载时设置标志，确保只在组件挂载时更新状态。
2. 使用 AbortController（适用于 fetch）：

   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）以复用逻辑。

注意： React 官方并不推荐直接使用 useRef 或全局变量作为 isMounted 标志来绕过警告，而应通过取消副作用（如 abort、clearTimeout）或条件判断来避免无效状态更新。这样不仅消除警告，也提升应用性能和内存管理。