patch/update 之后不使用提供程序更新状态,Flutter
Not updating state with provider after patch/update, Flutter
在 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 中定义的那样?
在此先感谢您的帮助!
您没有听到 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: ...);
在 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 中定义的那样?
在此先感谢您的帮助!
您没有听到 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: ...);