Riverpod如何在ConsumerWidget首次构建时调用StateNotifier的fetch方法获取数据

基础修复说明 #

先修正你现有Provider定义的疏漏：你当前的stateNotifierProvider没有注入DatabaseService依赖，需要调整为如下形式：

// 先注册DatabaseService的Provider
final databaseServiceProvider = Provider<DatabaseService>((ref) => DatabaseService());

// 关联依赖生成StateNotifier实例
final stateNotifierProvider = StateNotifierProvider<MyStateNotifier, CustomState>((ref) {
  final dbService = ref.watch(databaseServiceProvider);
  return MyStateNotifier(dbService);
});

方式1：Widget侧触发首次请求（适合请求依赖Widget参数的场景） #

通过帧渲染回调实现首次构建完成后仅执行一次请求，不会触发重复调用：

class MyWidget extends ConsumerWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听状态用于UI渲染
    final state = ref.watch(stateNotifierProvider);

    // 可选：监听状态变化处理副作用，比如报错弹提示
    ref.listen<CustomState>(stateNotifierProvider, (previous, next) {
      if (next is CustomStateError) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(next.errorMsg)),
        );
      }
    });

    // 首次帧渲染完成后触发请求，加状态判断避免重复调用
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (state is CustomStateInit) {
        ref.read(stateNotifierProvider.notifier).fetchData();
      }
    });

    // 按状态返回对应UI
    return switch (state) {
      CustomStateInit() => const Center(child: Text('等待加载数据')),
      CustomStateLoading() => const Center(child: CircularProgressIndicator()),
      CustomStateSuccess(result: final data) => Column(
          children: data.map((e) => Text(e.toString())).toList(),
        ),
      CustomStateError(errorMsg: final msg) => Center(child: Text('加载失败：$msg')),
    };
  }
}

方式2：StateNotifier初始化时自动触发请求（适合无Widget依赖的场景） #

如果请求不需要Widget侧传参，直接在Notifier构造函数中调用请求方法即可，代码更简洁：

class MyStateNotifier extends StateNotifier<CustomState> {
  final DatabaseService databaseService;      

  MyStateNotifier(this.databaseService) : super(CustomStateInit()) {
    // 初始化完成后自动拉取数据
    fetchData();
  }

  Future<void> fetchData() async {
    // 加状态判断避免重复请求
    if (state is CustomStateLoading || state is CustomStateSuccess) return;
    state = CustomStateLoading();
    try {
      final result = await databaseService.apiRequest();
      state = CustomStateSuccess(result);
    } catch (e) {
      state = CustomStateError(e.toString());
    }
  }
}

注意事项 #

• 不要直接在build方法中调用fetchData，会导致每次Widget重建都触发重复请求
• 所有异步请求建议加异常捕获，避免未处理的异常导致应用崩溃

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