如何在api调用后更新initState()颤振中的列表?

Question

所以我有一个有状态的小部件，它有一个列表变量，我想从API调用更新。我的问题是，列表是空的，即使我做fetchItems()在initState()。

我如何用fetchItems函数的内容更新itemsList ?如果我使用setState()，函数不应该更新itemsList吗?

class _ItemsWidgetState extends State<ItemsWidget> {

List<ItemsModel> itemsList = [];
void initState(){
fetchItems();
}

fetchItems() async {
final response = await http.get(url);

if (response.statusCode == 200) {
final fetchedItems = json.decode(response.body);
for (var item in fetchedItems) {
ItemsModel item = ItemsModel.fromJson(item);
setState(() {
itemsList.add(item);
});
}
} else {
throw Exception('Failed to load items');
}
}

Answer 1

• 避免在循环中调用setState，在任务完成后调用。
• 始终调用super.initState并将initState标记为覆盖

class _ItemsWidgetState extends State<ItemsWidget> {

List<ItemsModel> itemsList = [];
@override
void initState(){
super.initState();
fetchItems();
}

fetchItems() async {
final response = await http.get(url);

if (response.statusCode == 200) {
final fetchedItems = json.decode(response.body);

for (var item in fetchedItems) {
ItemsModel item = ItemsModel.fromJson(item);
/// Remove from setState
itemsList.add(item);
}

/// Tells to Flutter that now something has changed
setState(() {});
} else {
throw Exception('Failed to load items');
}
}

Answer 2

首先检查fetchedItems是否为列表类型

class _ItemsWidgetState extends State<ItemsWidget> {

List<ItemsModel> itemsList = [];
void initState(){
fetchItems();
}

fetchItems() async {
final response = await http.get(Uri.parse(url));

if (response.statusCode == 200) {
final fetchedItems = jsonDecode(response.body);
for (var item in fetchedItems) {
ItemsModel item = ItemsModel.fromJson(item);
setState(() {
itemsList.add(item);
});
}
} else {
throw Exception('Failed to load items');
}
}