patch/update 之后不使用提供程序更新状态，Flutter

Question

在 API 上修补信息后，我的 UI 似乎没有更新更改。我正在使用 Provider 进行状态管理。这是代码：

更新：将数据更改为一个对象，将其作为一个对象发送到 API 端点

用户模型：

class UserData{
  String name,
      surname,
      birthDate;

  UserData({
    this.generalEmail,
    this.surname,
    this.primaryPhone,
  });

  UserData.fromJson(Map<String, dynamic> json) {
    name= json['name'];
    surname = json['surname'];
    birthDate= json['birthDate'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = Map<String, dynamic>();
    data['name'] = this.name;
    data['surname'] = this.surname;
    data['birthDate'] = this.birthDate;

    return data;
  }
}

用户存储：

class UserStore extends ChangeNotifier {

  Map<String, UserData> _userInfo = {};
  Map<String, UserData> get userInfo => _userInfo ;

 void updateUserInfo(UserData user) {
    _userInfo[user.userId] = user;
    notifyListeners();
  }

UserData  getUserInfoByUserId(String userId) => _userInfo[userId];
}

以及用户存储的服务操作：


  UserStore userStore;

  BuildContext context;

  UserActions(BuildContext context) {
    this.context = context;
    this.userStore = Provider.of<UserStore>(context, listen: false);
  }

Future<HTTPResponse<UserData>> patchUserInfo(UserData user) async {
    final response = await ApiRequest(Method.PATCH, '/users',
        body: jsonEncode(user.toJson()));
    dynamic body = jsonDecode(response.body);
    if (response.statusCode == 200) {
      dynamic data = body['data'];
      UserData user = UserData();
      if (data != null) {
        user = UserData.fromJson(data);
      }
      return HTTPResponse<UserData>(
        isSuccessful: true,
        data: user,
        message: HTTPResponse.successMessage,
        statusCode: response.statusCode,
      );
    } else {
      return HTTPResponse<UserData>(
        isSuccessful: false,
        data: null,
        message: body['message'] ?? HTTPResponse.errorMessage,
        statusCode: response.statusCode,
      );
    }
  }

 Future<void> changeUserInfo(UserData user) async {
    final userRes = await patchUserInfo( // call the API and pass the data
        user);
    if (userRes != null) {
      userStore.updateUserInfo(user);
      return;
    }
    userStore.updateUserInfo(user);
  }

UI 未更新：

final userStore = Provider.of<UserStore>(context, listen: false);
    UserData user = userStore.getUserInfo(userId);
...
return Column(
children: [
    Text(user.name), // only updates it when I refresh the widget
    Text(user.surname), // only updates it when I refresh the widget
    Text(user.birthDate), // only updates it when I refresh the widget
   ],
);

API 完成后，我想用最新更改更新我的 UI，如果没有，请不要更新 UI。我不确定，但这可能是我没有正确设置 UserStore 中的 updateUserInfo 方法，以便在 API 调用成功后立即更新 UI。我的错误在哪里？当它是一个列表时，我可以使用 indexWhere，但是当数据模型是一个 Map 时，我该如何更新它，就像我在 UserStore 中定义的那样？

在此先感谢您的帮助！

Answer 1

您没有听到 Provider 中的变化（参见：listen: false）。您可以使用以下代码在使用 updateUserInfo:

进行更改时收到通知

return Consumer<UserStore>(builder: (context, UserStore userStore, child) {
  UserData user = userStore.getUserInfo(userId);
  return Column(
    children: [
      Text(user.name),
      Text(user.surname), 
      Text(user.birthDate),
    ],
  );
});

当你从 API 获取数据时使用它（因为在这里你不需要听）：

context.read<UserStore>().updateUserInfo(userRes);

在 Consumer:

之上创建这样的提供程序

return ChangeNotifierProvider(create: (context) => UserStore(), child: ...);

patch/update 之后不使用提供程序更新状态，Flutter

Not updating state with provider after patch/update, Flutter

flutter

mobile

flutter-provider