api调用后如何更新initState（）中的列表？答案

【问题标题】：How to update a list in initState() flutter after the api call?api调用后如何更新initState（）中的列表？
【发布时间】：2021-12-09 06:20:12
【问题描述】：

所以我有一个有状态的小部件，它有一个我想通过 API 调用更新的 List 变量。我的问题是，即使我在 initState() 中执行了 fetchItems()，List 也是空的。

然后如何使用 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');
    }
}

【问题讨论】：

作为一种优化，只需在 for 下方调用一次 setState，这样您就不会每隔几毫秒就对每个反序列化的项目进行重建。
对，我可以在函数内创建一个临时列表，但这仍然不能回答我的问题，即为什么 itemsList 在函数调用后没有更新。

标签： flutter dart mobile flutter-listview flutter-state

【解决方案1】：

首先检查 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');
        }
    }

【讨论】：

所以 fetchItems 是一个我正在解码的 json 对象，这就是我执行循环以便从 json 中获取每个对象的原因
这里，第一次解码为列表。然后，您只需将其循环并存储到列表中即可。您可以使用 Future.deleay(Duration(second : 1)).then({ setState((){itemList.add(item)}) }) 进行检查。希望您能理解这个概念。

【解决方案2】：

避免在循环内调用 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');
    }
}

【讨论】：

所以 fetchItems 是一个我正在解码的 json 对象，这就是我执行循环以便从 json 中获取每个对象的原因。
您的“json 对象”实际上是一个对象还是一个 json 数组对象？
所以这就是 api 返回的内容，[{"ID":3,"Username":"test","Name":"test","Price":"2"},{ "ID":4,"Username":"test","Name":"test2","Price":"3"},{"ID":5,"Username":"test","Name": "test1234","价格":"6",},{"ID":6,"用户名":"test","名称":"test1234","价格":"111"}]
所以我猜我可以通过返回来迭代它，不是吗？
看起来不错，那么您是如何在构建方法上构建 UI 的呢？看起来错误不在fetchItems 方法中