Flutter Firebase实时数据库聊天功能报setState()调用时机错误

错误信息 #

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: setState() called after dispose(): _EventChatScreenState#7c8b5(lifecycle state: defunct, not mounted)
This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().
#0      State.setState.<anonymous closure> (package:flutter/src/wid<…>

相关代码 #

initState与dispose代码 #

@override
void initState() {
  super.initState();

  dbRef = dbInstance.ref("/events/");
  var query = dbRef!.child(widget.event.event.eventId);
  FirebaseList(
    query: query,
    onChildAdded: (index, snapshot) {
      Map<dynamic, dynamic> childMap = snapshot.value as dynamic;
      ChatMessage newChatMessage = ChatMessage(
        chatMessageId: snapshot.key.toString(),
        userId: childMap["userId"],
        displayName: childMap["displayName"],
        message: childMap["message"],
        datetime: childMap["datetime"],
      );

      setState(() {
        chatMessages.add(newChatMessage);
      });
    },
  );
  _messageFieldController = TextEditingController();
}

@override
void dispose() {
  super.dispose();
  _messageFieldController.dispose();
}

自动滚动代码 #

void scrollToBottom() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
    });
  }

@override
Widget build(BuildContext context) {
  final user = ref.watch(userProvider);
  if (chatMessages.isNotEmpty) {
    scrollToBottom();
  }
  // ... 其余build代码
}

问题原因 #

1. Firebase监听未取消：FirebaseList在initState中创建但未保存引用，也未在dispose时销毁监听。当widget从组件树移除（调用dispose）后，Firebase实时数据库的onChildAdded回调仍会触发，此时调用setState就会报错。
2. 滚动回调时机问题：在build方法中每次调用scrollToBottom，会通过addPostFrameCallback添加异步回调。如果widget已经被销毁，这个回调仍可能执行，加剧了错误触发的概率，甚至直接导致_scrollController操作报错。

解决方法 #

1. 管理FirebaseList的生命周期 #

• 在State类中声明FirebaseList变量，保存引用：

  FirebaseList? _firebaseList;
  

• 初始化时保存引用，并在setState前检查mounted状态：

  @override
  void initState() {
    super.initState();
  
    dbRef = dbInstance.ref("/events/");
    var query = dbRef!.child(widget.event.event.eventId);
    _firebaseList = FirebaseList(
      query: query,
      onChildAdded: (index, snapshot) {
        Map<dynamic, dynamic> childMap = snapshot.value as dynamic;
        ChatMessage newChatMessage = ChatMessage(
          chatMessageId: snapshot.key.toString(),
          userId: childMap["userId"],
          displayName: childMap["displayName"],
          message: childMap["message"],
          datetime: childMap["datetime"],
        );
  
        // 确保widget仍在组件树中才调用setState
        if (mounted) {
          setState(() {
            chatMessages.add(newChatMessage);
          });
          // 消息添加后再触发滚动，避免在build中重复调用
          scrollToBottom();
        }
      },
    );
    _messageFieldController = TextEditingController();
  }
  

• 在dispose中销毁FirebaseList的监听，同时别忘了销毁滚动控制器：

  @override
  void dispose() {
    _firebaseList?.dispose(); // 取消Firebase实时监听
    _messageFieldController.dispose();
    _scrollController.dispose(); // 销毁滚动控制器
    super.dispose();
  }
  

2. 优化滚动逻辑 #

• 修改scrollToBottom，增加安全检查，避免在widget销毁后执行操作：

  void scrollToBottom() {
    if (!mounted) return;
    SchedulerBinding.instance.addPostFrameCallback((_) {
      // 检查滚动控制器是否仍与组件关联
      if (_scrollController.hasClients && mounted) {
        _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
      }
    });
  }
  

• 移除build方法中的scrollToBottom调用，改为在onChildAdded的setState之后调用（如上述代码所示），避免每次build都触发滚动，减少不必要的异步回调。

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