Why is the flutter setState not updating the list?

Question

I have two api's from which I get data, I wanna check if any of the desired field match with each other data coming but it don't seem to work. I have two api's from which I get data, I wanna check if any of the desired field match with each other data coming but it don't seem to work. I have two api's from which I get data, I wanna check if any of the desired field match with each other data coming but it don't seem to work.

class Home extends StatefulWidget {
  const Home({ Key? key }) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

 List compaints = [];
 List found = [];
 List match = [];
 var u_imei;
 var d_imei;

Future fetch() async {

  http.Response response_one;
  http.Response response_two;
  response_one = await http.get(Uri.parse("https://script.google.com/macros/s/AKfycbxi9kN6NWvoFjkQZE1OVJDPpWmQeYk0V5hNfRKqXS19wjz86SYq_FoQ51fjNQY22bN4/exec"));
  response_two = await http.get(Uri.parse("https://script.google.com/macros/s/AKfycbx20kfm1g4Hno9DzO1uccmLgmuIQBkXQcA9tnhcup873TsEMEy9ejszCluhf4FzW-YJqQ/exec"));
  
  if(response_one == 200 && response_two == 200){
    if(mounted){
      setState(() {
        compaints = jsonDecode(response_one.body);
        found = jsonDecode(response_two.body);
         u_imei = compaints[2];
         d_imei = found[1];

  if(d_imei == u_imei)  {
    if(mounted){
        print("working");
      setState(() {
        match.add(d_imei);
      });
    }

  } 

      });
    }
  }
}

  @override
  Widget build(BuildContext context) {
    // fetchu();
    // fetchd();
    // check();
    fetch();
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(compaints.length.toString()),
          SizedBox(height: 20,),
           Text(found.length.toString()),
        ],
      ),
    );
  }
  
}

Answer 1

There are several issues:

1. fetch is called in build, which causes rebuild loop. First step to move it to initState.
2. Response is compared to 200 (response_one == 200). There is property statusCode.
3. Parsing imei's is not correct. Responses:

[{time: 2022-07-03T16:07:15.491Z, name: Asif, imei: 1234, number: 9014580667}]
[{time: 2022-07-05T08:12:31.029Z, imei: 1234}]

So should be something like this:

u_imei = compaints[0]['imei'];
d_imei = found[0]['imei'];

Answer 2

Calling the fetch method inside the build will loop as the fetch method calls the setState(). Use initState() to call on the load or on refresh indicator while the user pulls to refresh or any other method.

class Home extends StatefulWidget {
  const Home({ Key? key }) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List compaints = [];
  List found = [];
  List match = [];
  var u_imei;
  var d_imei;
  
  @override
  void initState() {
    super.initState();
    fetch();
  }

  @override
  void dispose() {
    super.dispose();
  }

  Future fetch() async {
    http.Response response_one;
    http.Response response_two;
    response_one = await http.get(Uri.parse("https://script.google.com/macros/s/AKfycbxi9kN6NWvoFjkQZE1OVJDPpWmQeYk0V5hNfRKqXS19wjz86SYq_FoQ51fjNQY22bN4/exec"));
    response_two = await http.get(Uri.parse("https://script.google.com/macros/s/AKfycbxEDXZAmieRWk-8kOX-07ta8Q4TIa9Lf_NAiArEWhaU4jXO8d_DM9Jwuc0DRIwmUpPh/exec"));

    if(response_one.statusCode == 200 && response_two.statusCode == 200){
      if(mounted){
        setState(() {
          compaints = jsonDecode(response_one.body);
          found = jsonDecode(response_two.body);
          u_imei = compaints[2];
          d_imei = found[1];

          if(d_imei == u_imei)  {
            if(mounted){
              print("working");
              setState(() {
                match.add(d_imei);
              });
            }

          }

        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(compaints.length.toString()),
          SizedBox(height: 20,),
          Text(found.length.toString()),
        ],
      ),
    );
  }

}