使用Riverpod的StateNotifierProvider获取数据后无法UI渲染求助

你的问题主要出在三个核心点上，导致UI无法响应状态变化并渲染数据：

1. 未触发数据获取：UI中没有调用getUserData方法，状态始终停留在初始值
2. Equatable实现错误：所有HomeState子类的props返回空数组，Riverpod无法检测到状态变化，不会通知UI重建
3. 状态未分类处理：UI仅监听了状态，但没有根据状态类型（加载中/已加载/错误）读取对应数据或渲染不同内容

1. 修复State类的Equatable实现 #

Equatable通过props判断状态是否变化，必须将状态中的关键属性加入props列表：

abstract class HomeState extends Equatable {
  const HomeState();
}

class UserInitalState extends HomeState {
  const UserInitalState();

  @override
  List<Object> get props => [];
}

class UserLoadingState extends HomeState {
  const UserLoadingState();

  @override
  List<Object> get props => [];
}

class UserLoadedState extends HomeState {
  final UserModel userDataModel;
  const UserLoadedState({required this.userDataModel});

  @override
  List<Object> get props => [userDataModel]; // 将用户数据加入props
}

class UserErrorState extends HomeState {
  final String? message;
  const UserErrorState({this.message});

  @override
  List<Object?> get props => [message]; // 将错误信息加入props
}

2. 在UI中触发数据获取并处理状态 #

改为ConsumerStatefulWidget，在页面初始化时调用数据获取方法，并根据不同状态渲染对应内容：

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends ConsumerState<HomeScreen> {
  @override
  void initState() {
    super.initState();
    // 页面初始化时触发数据获取
    ref.read(userDataProvider.notifier).getUserData();
  }

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

    return Scaffold(
      body: Center(
        child: () {
          if (userState is UserLoadingState) {
            return const CircularProgressIndicator();
          } else if (userState is UserLoadedState) {
            print(userState.userDataModel); // 打印用户数据
            return Text("用户名：${userState.userDataModel.name}"); // 渲染用户数据
          } else if (userState is UserErrorState) {
            return Text(userState.message ?? "加载失败");
          } else {
            return const Text("HomeScreen");
          }
        }(),
      ),
    );
  }
}

如果想让状态处理更优雅，可以给HomeState添加when方法：

// 在HomeState抽象类中添加
T when<T>({
  required T Function() initial,
  required T Function() loading,
  required T Function(UserModel data) loaded,
  required T Function(String? message) error,
}) {
  switch (runtimeType) {
    case UserInitalState:
      return initial();
    case UserLoadingState:
      return loading();
    case UserLoadedState:
      return loaded((this as UserLoadedState).userDataModel);
    case UserErrorState:
      return error((this as UserErrorState).message);
    default:
      throw Exception("未知状态类型");
  }
}

之后UI中可以简化为：

child: userState.when(
  initial: () => const Text("HomeScreen"),
  loading: () => const CircularProgressIndicator(),
  loaded: (userData) {
    print(userData);
    return Text("用户名：${userData.name}");
  },
  error: (message) => Text(message ?? "加载失败"),
),

3. 优化Controller的依赖注入（可选） #

避免在Controller中直接实例化仓库，通过Riverpod的依赖注入获取，提升代码可测试性：

// 先定义仓库的Provider
final authRepositoryProvider = Provider<AuthRepository>((ref) => AuthRepository());

// 修改userDataProvider
final userDataProvider = StateNotifierProvider<HomeController, HomeState>((ref) {
  final authRepo = ref.watch(authRepositoryProvider);
  return HomeController(authRepo);
});

class HomeController extends StateNotifier<HomeState> {
  final AuthRepository authRepository;
  
  HomeController(this.authRepository) : super(const UserInitalState());

  void getUserData() async {
    print("getting user data");
    state = const UserLoadingState();
    try {
      final res = await authRepository.getUserData();
      if (res is Success) {
        print(res.response);
        state = UserLoadedState(userDataModel: res.response as UserModel);
        print(state);
      } else {
        print("error here");
        state = const UserErrorState(message: "获取数据失败");
      }
    } catch (e) {
      print("$e catch errorr");
      state = UserErrorState(message: e.toString());
    }
  }
}

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