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

如何解决无法对未安装的组件执行 React 状态更新以供 useCallback

有时我会收到错误消息，完整的错误消息是： "警告：无法在卸载的组件上执行 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>
  );
};

解决方法

添加一个 ref，您可以在其中跟踪它是否已卸载。然后在您的函数中检查 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]);