How to update a list in initState() flutter after the api call?-CodePudding

So I have a Stateful Widget which has a List variable I want to update from the API call. My issue is that the List is empty even after I do the fetchItems() in the initState().

How can I then update the itemsList with the content of the fetchItems function? Isnt the function suppose to update itemsList if I use setState().

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');
    }
}

CodePudding user response：

First check fetchedItems is a list type.

   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');
        }
    }

CodePudding user response：

Avoid calling setState inside loops, call it after your task has done.
Add an assert or debug to make sure that [fetchedItems] is a List
Add an assert to make sure that your response is not empty

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);
  
      assert(fetchedItems is Iterable, 'Expected a Iterable, but got: ${fetchedItems.runtimeType}');

      assert((() {
        if (fetchedItems.isEmpty) {
          print('API response is empty: $fetchedItems');          
        }

        return true;
      })());

      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');
    }
}