为什么我在使用提供程序调用 api 时出现错误?

Question

我正在调用一个 API 并使用提供程序保存其响应，以便我可以从我的颤振应用程序中的任何位置访问。用于存储响应的模型是

class Album with ChangeNotifier {
final String id;
final List<String> categoriesId;
final String title;
final String imageUrl;
Album({this.id, this.categoriesId, this.title, this.imageUrl});
factory Album.fromJson(Map<String, dynamic> json) {
List<dynamic> res = json['category_list'];
List<String> cats = [];
res.forEach((tx) {
cats.add(tx.toString());
});
return Album(
id: json['id'].toString(),
categoriesId: cats,
title: json['name'],
imageUrl: json["image"],
);
}
}

当函数调用端点是，

String albumUrl = "http://192.168.227.102:9000/static/album.json";
Future<List<Album>> fetchAnime(BuildContext context) async {
List<Album> resAlbum = [];
try {
final response = await http.get(Uri.parse(albumUrl));
if (response.statusCode == 200) {
List<dynamic> result = jsonDecode(response.body)['album'];
result.forEach((tx) {
Album test = Anime.fromJson(tx as Map<String, dynamic>);
resAlbum.add(test);
});
}
} catch (e) {
print(e);
}
return resAlbum;
}

模型Album的提供程序是，

class AlbumProvider with ChangeNotifier {
List<Album> _items = [];
void getPostData(context) async {
bool loading = true;
if (this._items.isNotEmpty) {
this._items = await fetchAlbum(context);
}
loading = false;
notifyListeners();
}
}

使用此提供程序的视图是，

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
void initState() {
Provider.of<AlbumProvider>(context, listen: false).getPostData(context);
super.initState();
}
@override
Widget build(BuildContext context) {
List<Album> albumData = Provider.of<AlbumProvider>(context).allitems;
return Scaffold(
appBar: AppBar(
title: Text(
'Home Screen',
),
),
body:albumData.isEmpty
?Text("we are fetching data")
:Text("fetching complete")
)
}
}

当我运行应用程序时，出现以下错误，

在

为相册提供程序调度通知时抛出以下断言： setState() 或 markNeedsBuild() 在构建期间调用。

此_InheritedProviderScope小部件不能标记为需要构建，因为框架已经在构建小部件的过程中。 仅当小部件的祖先之一当前正在构建时，才能将其标记为需要在构建阶段构建。允许此例外，因为框架在子小部件之前构建父小部件，这意味着将始终构建脏的后代。否则，框架可能不会在此构建阶段访问此小组件。 调用 setState() 或 markNeedsBuild() 的小部件是： _InheritedProviderScope

出现错误的原因是什么，如何删除此错误？

Answer 1

这是因为，当您调用时

Provider.of<AlbumProvider>(context, listen: false).getPostData(context);

来自主页的 initState 方法，该方法又调用以下方法

void getPostData(context) async {
bool loading = true;
if (this._items.isNotEmpty) {
this._items = await fetchAlbum(context);
}
loading = false;
notifyListeners();
}

此函数调用 notifiyListeners(); 问题是您正在侦听主页构建方法中对AlbumProvider的更改。

List<Album> albumData = Provider.of<AlbumProvider>(context).allitems;

因此，最终，initState调用getPostData调用notifyListeners()，它将尝试在完成构建之前重建小部件树。

您应该FutureBuilder，而不是在initState方法中调用getPostData()。