Flutter中Riverpod+Hooks组件销毁时执行异步逻辑报错的解决咨询

我开发了一个使用Riverpod与Hooks的Flutter移动端应用，希望在组件销毁时执行如下异步逻辑：

useEffect(
  () {
    final firestoreRepo = 
      ref.read(firebaseFirestoreRepositoryProvider);

    return () async {
      try {
        // 此处抛出异常
        // 需要在组件销毁时调用该Future，提前调用无业务意义
        final relationship =
          await ref.read(relationshipWithProvider(pid).future);

        if (relationship?.unseen ?? false) {
          await firestoreRepo?.updateRelatinoship(pid: pid);
        }
      } catch (e, st) {
        // 打印错误
      }
    };
  },
  [],
);

执行时在标注行抛出如下错误：

I/flutter ( 5967): Looking up a deactivated widget's ancestor is unsafe.
I/flutter ( 5967): At this point the state of the widget's element tree is no longer stable.

解决方案 #

问题根源是组件销毁后，通过Widget关联的ref.read尝试访问已失效的Element上下文，以下是几种可行解决方式：

1. 提前预取异步Future，销毁时直接使用 #

将需要的异步请求提前在组件活跃时发起，存储Future引用，销毁时仅等待结果：

useEffect(
  () {
    final firestoreRepo = ref.read(firebaseFirestoreRepositoryProvider);
    // 组件活跃时提前获取future，避免销毁后读取
    final relationshipFuture = ref.read(relationshipWithProvider(pid).future);

    return () async {
      try {
        final relationship = await relationshipFuture;
        if (relationship?.unseen ?? false) {
          await firestoreRepo?.updateRelatinoship(pid: pid);
        }
      } catch (e, st) {
        // 处理错误
      }
    };
  },
  [pid], // 依赖pid，确保pid变更时重新获取future
);

这种方式不会在组件销毁后触发Provider读取，完全规避上下文失效问题。

2. 使用独立ProviderContainer读取 #

创建脱离Widget上下文的ProviderContainer，直接读取Provider数据：

useEffect(
  () {
    final firestoreRepo = ref.read(firebaseFirestoreRepositoryProvider);

    return () async {
      try {
        // 创建独立容器，不依赖Widget的ref上下文
        final container = ProviderContainer();
        final relationship = await container.read(relationshipWithProvider(pid).future);
        
        if (relationship?.unseen ?? false) {
          await firestoreRepo?.updateRelatinoship(pid: pid);
        }
        // 销毁容器，防止内存泄漏
        container.dispose();
      } catch (e, st) {
        // 处理错误
      }
    };
  },
  [],
);

注意必须调用container.dispose()清理资源，避免内存泄漏。

3. 标记组件销毁状态（补充方案） #

用状态变量标记组件是否已销毁，在异步流程中检查状态终止操作：

useEffect(
  () {
    final firestoreRepo = ref.read(firebaseFirestoreRepositoryProvider);
    var isDisposed = false;

    return () async {
      isDisposed = true;
      try {
        final relationship = await ref.read(relationshipWithProvider(pid).future);
        // 组件已销毁则终止后续操作
        if (isDisposed) return;
        
        if (relationship?.unseen ?? false) {
          await firestoreRepo?.updateRelatinoship(pid: pid);
        }
      } catch (e, st) {
        // 处理错误
      }
    };
  },
  [],
);

该方案仅能终止后续操作，无法完全避免初始ref.read的报错，建议结合前两种方案使用。

内容的提问来源于stack exchange，提问作者Aimn Blbol