使用StateNotifier与StateNotifierProvider时Riverpod无法更新UI

问题 #

我在StateNotifier类中使用了异步函数，状态是一个简单类。只有在编辑器中点击保存时才会显示正确的值，其他时候无法正常更新显示。

我的代码如下：

class UserController extends StateNotifier<UserState> {
  UserController({required Databases dbs}) : _dbs= dbs , super(UserState());
  
  Databases _dbs;

  Future<void> getUserDetails(String uid) async {
    UserDetail res = await _dbs.getDocument(uid); // some user id string
    state.user = res; 
  }
}

class UserState {
  UserDetail? user;
  bool? isLoading;
}

class UserDetail {
  String? name;
  String? email;
}

在UI中，我在build函数里执行以下代码：

ref.watch(UserDetailProvider.notifier).getUserDetails("43782fake78");
Text(ref.watch(UserDetailProvider).user?.name ?? "");

页面加载后显示null，即使build函数已执行。另外这是异步操作，我该如何处理？尝试在构造函数中运行该函数，结果相同。

解决方案 #

问题出在状态更新方式错误、异步方法调用时机不当以及缺少状态生命周期处理这几个核心点，以下是针对性修复：

1. 修正StateNotifier的状态更新逻辑

StateNotifier无法检测到现有state对象的属性修改，必须通过赋值全新的state对象来触发UI更新。给UserState添加copyWith方法，方便生成新实例：

class UserController extends StateNotifier<UserState> {
  UserController({required Databases dbs}) 
    : _dbs = dbs, 
      super(UserState(isLoading: false));
  
  final Databases _dbs;

  Future<void> getUserDetails(String uid) async {
    // 先设置加载状态
    state = state.copyWith(isLoading: true);
    try {
      UserDetail res = await _dbs.getDocument(uid);
      // 生成新的state对象完成更新
      state = state.copyWith(user: res, isLoading: false);
    } catch (e) {
      // 处理错误，重置加载状态
      state = state.copyWith(isLoading: false);
      // 可在此添加错误日志或用户提示
    }
  }
}

class UserState {
  final UserDetail? user;
  final bool isLoading;

  UserState({this.user, required this.isLoading});

  // 快速生成新状态的copyWith方法
  UserState copyWith({
    UserDetail? user,
    bool? isLoading,
  }) {
    return UserState(
      user: user ?? this.user,
      isLoading: isLoading ?? this.isLoading,
    );
  }
}

class UserDetail {
  final String? name;
  final String? email;

  UserDetail({this.name, this.email});
}

2. 正确调用异步方法并处理UI状态

不要在build方法中直接调用异步方法（会导致重复执行），改用页面初始化时机调用，并处理加载/空数据状态：

方案一：使用Flutter Hooks

class UserPage extends HookWidget {
  const UserPage({super.key});

  @override
  Widget build(BuildContext context) {
    final userController = ref.watch(UserDetailProvider.notifier);
    final userState = ref.watch(UserDetailProvider);

    // 页面初始化时仅调用一次
    useEffect(() {
      userController.getUserDetails("43782fake78");
      return null;
    }, []);

    // 加载状态显示
    if (userState.isLoading) {
      return const Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      body: Center(
        child: Text(userState.user?.name ?? "暂无数据"),
      ),
    );
  }
}

方案二：使用StatefulWidget

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

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

class _UserPageState extends State<UserPage> {
  @override
  void initState() {
    super.initState();
    // 初始化时调用异步方法
    ref.read(UserDetailProvider.notifier).getUserDetails("43782fake78");
  }

  @override
  Widget build(BuildContext context) {
    final userState = ref.watch(UserDetailProvider);

    if (userState.isLoading) {
      return const Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      body: Center(
        child: Text(userState.user?.name ?? "暂无数据"),
      ),
    );
  }
}

3. 确保Provider定义正确

你的UserDetailProvider需要正确关联StateNotifier和状态：

final UserDetailProvider = StateNotifierProvider<UserController, UserState>((ref) {
  // 传入你的Databases实例
  return UserController(dbs: Databases());
});

核心要点总结 #

• StateNotifier必须通过赋值新state对象触发更新，不能直接修改现有state的属性。
• 异步操作要覆盖加载、成功、错误三种状态，避免用户看到空白或null。
• 异步方法要在页面初始化时调用，避免在build方法中重复执行。

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