提问者:小点点

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


有时我会收到一个错误,完整的错误消息是:“警告:无法对未安装的组件执行React状态更新。这是一个no op,但表示应用程序内存泄漏。若要修复,请取消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>
  );
};

共1个答案

匿名用户

添加一个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]);