如何使用Riverpod在initState方法中设置ChangeNotifierProvider的接口数据

你当前的实现中load()是异步方法，Provider实例化时触发调用不会等待接口返回，因此直接在initState中读取user字段会拿到初始的null值，以下是两种可直接落地的实现方案：

方案1：在initState中添加一次性状态监听 #

适用于你不想修改现有UserProxy实现的场景，在ConsumerStatefulWidget的initState中添加监听，接口返回拿到数据后直接处理即可：

class UserPage extends ConsumerStatefulWidget {
  final String userId;
  const UserPage({super.key, required this.userId});

  @override
  ConsumerState<UserPage> createState() => _UserPageState();
}

class _UserPageState extends ConsumerState<UserPage> {
  User? currentUser;

  @override
  void initState() {
    super.initState();
    // 手动添加监听，只处理一次数据返回
    ref.listenManual<UserProxy>(
      userProvider(widget.userId),
      (previous, next) {
        if (next.user != null && currentUser == null) {
          setState(() {
            currentUser = next.user;
          });
          // 这里可以直接做你需要的赋值操作，比如给TextField设初始值等
        }
      },
      fireImmediately: true, // 可选，如果需要读取当前已有的缓存值可以开启
    );
  }

  @override
  Widget build(BuildContext context) {
    // 你的页面布局
    return const Scaffold();
  }
}

方案2：适配异步场景优化实现（更推荐） #

你当前的实现没有处理加载中、请求失败的异常场景，建议将user字段改为AsyncValue类型，后续无论是在initState监听还是在build中处理状态都更方便：

第一步：修改UserProxy实现 #

final userProvider = ChangeNotifierProvider.autoDispose.family<UserProxy, String>((ref, id) {
  var notifier = UserProxy(userId: id);
  notifier.load();
  return notifier;
});

class UserProxy extends ChangeNotifier {
  final String userId;
  // 用AsyncValue包裹，覆盖加载/成功/失败三种状态
  AsyncValue<User> user = const AsyncLoading();

  UserProxy({required this.userId});

  Future<void> load() async {
    try {
      final responseStr = await getUser();
      user = AsyncData(User.fromJson(jsonDecode(responseStr)));
    } catch (e, stackTrace) {
      user = AsyncError(e, stackTrace);
    } finally {
      notifyListeners();
    }
  }

  Future<String> getUser() async {
    Map<String, String> queryParams = {"id": userId};
    var url = Uri.https("asdadas.asdasd.com", "endpoint", queryParams);
    Map<String, String> headers = {'content-type': "application/json"};
    var response = await http.get(url, headers: headers);
    // 建议添加状态码判断，接口返回非200时主动抛异常
    if (response.statusCode != 200) {
      throw Exception("请求用户数据失败：${response.statusCode}");
    }
    return response.body;
  }
}

第二步：在initState中监听取值 #

@override
void initState() {
  super.initState();
  ref.listenManual<AsyncValue<User>>(
    userProvider(widget.userId).select((value) => value.user),
    (previous, next) {
      next.whenOrNull(
        data: (userData) {
          // 这里直接拿到请求成功的用户数据，做你需要的赋值操作
          currentUser = userData;
          setState(() {});
        },
        error: (e, stack) {
          // 可以统一处理请求失败的提示
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("用户数据加载失败：$e")));
        },
      );
    },
  );
}

注意事项 #

• 如果你不需要在UserProxy中维护额外的状态和操作方法，直接使用FutureProvider.autoDispose.family<User, String>实现会更简洁，无需自己维护ChangeNotifier和异步状态
• 开启autoDispose后如果页面在请求过程中销毁，Provider会自动释放资源，无需额外处理内存泄漏问题

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