无法对 useCallback 的未安装组件执行 React 状态更新

Question

有时我会收到错误消息，完整的错误消息是： “警告：无法在未安装的组件上执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消 useEffect 中的所有订阅和异步任务清理功能。"

解决此问题的最佳方法是什么？这是我的代码：

const CustomRefresh = (props) => {
  const {
    isCurrent, isScheduled
  } = props;
  const [refreshing, setRefreshing] = useState(false);

  const inventoryContext = useContext(inventoryContext);

  const onRefresh = React.useCallback(async () => {
    setRefreshing(true);

    if (isCurrent) {
      await inventoryContext.refreshToday();
    }

    if (isScheduled) {
      await inventoryContext.refreshScheduled();
    }

    setRefreshing(false);
  }, [refreshing]);

  return (
    <CustomRefresh refreshing={refreshing} style={style} onRefresh={onRefresh}>
      {children}
    </CustomRefresh>
  );
};

Answer 1

添加一个参考，您可以在其中跟踪它是否已卸载。然后在你的函数中检查 ref 在设置异步设置状态之前：

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

  const onRefresh = React.useCallback(async () => {
    setRefreshing(true);

    if (isCurrent) {
      await inventoryContext.refreshToday();
    }

    if (isScheduled) {
      await inventoryContext.refreshScheduled();
    }

    if (!unmounted.current) {
       setRefreshing(false);
    }
  }, [refreshing]);

无法对 useCallback 的未安装组件执行 React 状态更新

Can't perform React state update on an unmounted component for useCallback

reactjs

usecallback

use-effect