如何使用RiverPod Notifier实现类状态的跨页面更新与读取？

问题重现 #

你定义了RiverPod状态类和Freezed数据类，在第一个页面更新状态后，第二个页面始终读取不到更新后的值，相关代码如下：

状态与数据类定义 #

@riverpod
class UserCardSheetInfo extends _$UserCardSheetInfo {
  @override
  UserCardInputSheet build() => const UserCardInputSheet(issuerKey: '', cardKey: '');

  void updateIssuer(String value) {
    state = state.copyWith(issuerKey: value);
    print("issuerKey:${state.issuerKey}"); // 有值 
    print("cardKey:${state.cardKey}");     // 为空
  }

  void updateCard(String value) {
    state = state.copyWith(cardKey: value);
    print("issuerKey:${state.issuerKey}"); // 为空
    print("cardKey:${state.cardKey}");     // 有值
  }
}

@freezed
class UserCardInputSheet with _$UserCardInputSheet {
  const factory UserCardInputSheet({
    required String issuerKey,
    required String cardKey,
  }) = _UserCardInputSheet;
}

第一个页面（更新状态） #

class _SelectableIssuersList extends ConsumerStatefulWidget {
  const _SelectableIssuersList();

  @override
  ConsumerState<_SelectableIssuersList> createState() => _SelectableCardsListState();
}

class _SelectableCardsListState extends ConsumerState<_SelectableIssuersList> {
  @override
  Widget build(BuildContext context) {
    return SomeWidget( 
             onClick: (newIssuer) => setState(() {               
               ref.watch(userCardSheetInfoProvider.notifier).updateIssuer(newIssuer);
             }),
     );
  }
}

第二个页面（读取状态） #

class _SelectableCardsList extends ConsumerStatefulWidget {
  const _SelectableCardsList();

  @override
  ConsumerState<_SelectableCardsList> createState() => _SelectableCardsListState();
}

class _SelectableCardsListState extends ConsumerState<_SelectableCardsList> {
  @override
  Widget build(BuildContext context) {
    // 始终为空
    print(ref.watch(userCardSheetInfoProvider).issuerKey);
    return AnotherWidget();
  }
}

问题分析 #

1. 事件回调中错误使用ref.watch：ref.watch用于在build方法中监听状态变化，在onClick这类事件回调中使用会注册不必要的监听，甚至导致状态更新无法同步。
2. 多余的setState调用：更新RiverPod管理的状态不需要调用组件自身的setState，这会混淆局部组件状态和全局跨组件状态的更新逻辑。
3. 初始状态的空值误解：第一次更新issuerKey时，cardKey保留初始空字符串是正常逻辑；同理第一次更新cardKey时issuerKey为空也是正常的，后续更新会自动保留已设置的字段值。

解决方案 #

1. 修正状态更新逻辑 #

在事件回调中使用ref.read获取状态通知器，移除多余的setState：

class _SelectableIssuersList extends ConsumerStatefulWidget {
  const _SelectableIssuersList();

  @override
  ConsumerState<_SelectableIssuersList> createState() => _SelectableCardsListState();
}

class _SelectableCardsListState extends ConsumerState<_SelectableIssuersList> {
  @override
  Widget build(BuildContext context) {
    return SomeWidget( 
      onClick: (newIssuer) {               
        // 用ref.read获取notifier执行状态更新
        ref.read(userCardSheetInfoProvider.notifier).updateIssuer(newIssuer);
      },
    );
  }
}

2. 确保状态读取逻辑有效 #

第二个页面的ref.watch用法是正确的，当状态更新时，build方法会自动重新执行并获取最新值。如果仍无法读取更新值，检查两点：

• 两个页面是否处于同一个ProviderScope下（全局Provider默认在根Widget的ProviderScope中，无需额外配置）。
• 确认userCardSheetInfoProvider是全局定义的，没有被局部ProviderScope覆盖。

3. 优化状态更新方法（可选） #

在更新方法中打印完整状态，便于调试：

void updateIssuer(String value) {
  state = state.copyWith(issuerKey: value);
  print("更新后状态：issuerKey=${state.issuerKey}, cardKey=${state.cardKey}");
}

void updateCard(String value) {
  state = state.copyWith(cardKey: value);
  print("更新后状态：issuerKey=${state.issuerKey}, cardKey=${state.cardKey}");
}

正确的RiverPod读写规范 #

• 读取状态：在组件build方法中使用ref.watch(provider)，状态更新时组件会自动重建并获取最新值。
• 更新状态：在事件回调、异步方法中使用ref.read(provider.notifier)获取状态通知器，调用自定义方法更新状态，无需调用setState。
• 作用域管理：全局状态使用默认根ProviderScope，局部状态可通过嵌套ProviderScope实现隔离。

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