如何在 React 中正确处理异步 useEffect 中的 setState 以避免内存泄漏？

如何在 React 中正确处理异步 useEffect 中的 setState 以避免内存泄漏？

回答与解析：

在 React 中，当组件在异步操作（如数据请求）完成前被卸载时，如果此时调用 setState，会触发“Can't perform a React state update on an unmounted component”警告。这是因为 React 试图更新一个已经不存在的组件状态。

正确做法是使用一个“取消标志”（cleanup function）来避免在组件卸载后更新状态。

示例代码：

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    let isMounted = true; // 标志组件是否仍挂载

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

    fetchData();

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

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

关键点解析：

1. isMounted 标志：用于在异步回调中检查组件是否仍然挂载。
2. useEffect 的返回函数：在组件卸载时执行，用于清理副作用，此处将 isMounted 设为 false。
3. 条件更新状态：仅当 isMounted 为 true 时才调用 setState。

注意：虽然 useEffect 的清理函数会在组件卸载时执行，但 JavaScript 的闭包机制会“记住” isMounted 的引用，因此必须使用可变变量（如 let）或 useRef 来持久化该状态。更推荐使用 useRef，因为它不会触发重渲染：

const isMounted = useRef(true);
useEffect(() => {
  return () => {
    isMounted.current = false;
  };
}, []);

// 在异步回调中使用：if (isMounted.current) { ... }

这种方法能有效防止内存泄漏和不必要的状态更新，提升应用稳定性。