ConsumerStatefulWidget无限重建问题：原因及修复方案

问题说明 #

使用ConsumerStatefulWidget时，其build方法中的print语句出现无限执行的情况。将组件改为普通StatefulWidget并在Scaffold外层包裹Consumer后，问题不再出现。需确认该现象是否属于问题，以及正确的修复方式。

原因分析 #

问题核心并非ConsumerStatefulWidget本身，而是代码中存在状态更新循环：

1. MyApp的build方法中，routesBuilder回调内调用了getData方法
2. getData方法同时执行了两个状态更新操作：调用setState更新MyApp本地状态，以及通过ref.read(userProvider.notifier).update更新全局Provider状态
3. HomeScreen作为ConsumerStatefulWidget，通过ref.watch(userProvider)监听全局状态变化，状态更新会触发自身build
4. MyApp的setState会触发自身重建，再次进入routesBuilder调用getData，形成无限循环

修复方案 #

核心原则 #

禁止在build方法或routesBuilder这类频繁触发的回调中执行触发状态更新的操作（如setState、更新Provider状态），避免循环触发组件重建。

具体修改 #

1. 调整MyApp的数据获取逻辑

将getData的调用从build的routesBuilder中移除，改用ref.listen监听认证状态变化，仅在状态符合条件且未重复执行时触发数据获取：

class MyApp extends ConsumerStatefulWidget {
  const MyApp({super.key});

  @override
  ConsumerState<MyApp> createState() => _MyAppState();
}

class _MyAppState extends ConsumerState<MyApp> {
  bool _hasFetchedData = false; // 标记是否已获取数据，避免重复执行

  @override
  void initState() {
    super.initState();
    // 监听认证状态变化，仅在用户登录且未获取过数据时执行
    ref.listen<AsyncValue<User>>(authStateChangeProvider, (previous, next) {
      next.whenData((user) {
        if (user != null && !_hasFetchedData) {
          getData(user);
          _hasFetchedData = true;
        }
      });
    });
  }

  void getData(User data) async {
    final fetchedUserModel = await ref
        .watch(authControllerProvider.notifier)
        .getUserData(data.uid)
        .first;
    // 直接通过Provider管理用户状态，无需本地setState
    ref.read(userProvider.notifier).update(fetchedUserModel);
  }

  @override
  Widget build(BuildContext context) {
    return ref.watch(authStateChangeProvider).when(
          data: (data) => MaterialApp.router(
            debugShowCheckedModeBanner: false,
            title: 'nijimas',
            theme: MyColors.myAppTheme,
            routerDelegate: RoutemasterDelegate(
              routesBuilder: (context) {
                // 直接通过Provider判断用户登录状态
                final user = ref.watch(userProvider);
                if (data != null && user != null) {
                  return loggedInRoute;
                }
                return loggedOutRoute;
              },
            ),
            routeInformationParser: const RoutemasterParser(),
          ),
          error: (error, stackTrace) => ErrorText(error: error.toString()),
          loading: () => const Loader(),
        );
  }
}

2. 保留ConsumerStatefulWidget的写法（可选）

修复循环问题后，HomeScreen可继续使用ConsumerStatefulWidget，无需改为普通StatefulWidget+Consumer：

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({super.key});

  @override
  ConsumerState<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  void showEndDrawer(BuildContext context) {
    Scaffold.of(context).openEndDrawer();
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    final user = ref.watch(userProvider);
    return Scaffold(
      appBar: AppBar(actions: [
        Builder(builder: (context) {
          return Padding(
            padding: const EdgeInsets.only(right: 6.0),
            child: IconButton(
              icon: CircleAvatar(
                backgroundImage: NetworkImage(user!.profileImagePath),
              ),
              onPressed: () => showEndDrawer(context),
            ),
          );
        })
      ]),
      endDrawer: const ProfileDrawer(),
      body: const Center(
        child: Text("Hey"),
      ),
    );
  }
}

总结 #

• 无限build属于严重性能问题，会导致应用卡顿甚至崩溃，必须修复
• 问题根源是状态更新的循环触发，而非ConsumerStatefulWidget本身
• 正确修复方式是规范状态更新的触发时机，避免在build或类似高频回调中执行重建操作

内容的提问来源于stack exchange，提问作者wasa-bi