Flutter中调用setState函数引发无限循环的问题求助

问题根源 #

你这段监听数据库变化的代码如果写在build方法里，每次调用setState都会触发组件重建，build方法重新执行时又会注册一个新的数据库监听器。新监听器捕获到数据变化后再次调用setState，就这样形成了无限循环。

解决方案 #

把数据库监听器的注册移到initState方法中（这个方法只会在组件初始化时执行一次），同时保存订阅对象，在组件销毁时取消订阅，避免内存泄漏。

修改后的代码示例：

class YourWidget extends StatefulWidget {
  const YourWidget({super.key});

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  List<Player> players = [];
  StreamSubscription? _dbSubscription; // 保存订阅对象

  @override
  void initState() {
    super.initState();
    // 在initState中注册监听器，只执行一次
    _dbSubscription = playersRef.onValue.listen((DatabaseEvent event) {
      print("Changes in DB");
      List<Player> tempPlayers = [];
      for (final playerSnapshot in event.snapshot.children) {
        tempPlayers.add(Player(
          playerSnapshot.child("name").value.toString(),
          playerSnapshot.child("id").value.toString(),
          judge == playerSnapshot.child("name").value.toString(),
          playerSnapshot.child("isJudge").value as bool,
          playerSnapshot.child("isLoaded").value as bool,
        ));
      }

      setState(() {
        print("In set state");
        players = tempPlayers;
      });
    });
  }

  @override
  void dispose() {
    // 组件销毁时取消订阅，防止内存泄漏
    _dbSubscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 这里正常构建你的UI，使用players列表
    return YourUI(players: players);
  }
}

关键说明 #

• initState是StatefulWidget初始化阶段的生命周期方法，只会执行一次，在这里注册监听器不会重复创建订阅，从根源避免了无限循环。
• 保存StreamSubscription并在dispose中取消订阅，能防止组件销毁后监听器仍在运行导致的内存泄漏问题。
• 当数据库中players节点的数据变化时，监听器会触发并调用setState更新UI，完全满足你的实时更新需求。

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