flutter页面初始化请求网络数据时报错，热加载才能正确加载数据

Question

我打算在initState函数里面写API获取JSON数据的函数，通过listView组件来展示，结果第一次运行是显示

Null check operator used on a null value

接着我点击AS编译器左下角的⚡符号，然后就可以展示页面了，请问这是什么原因
以下是代码

void initState(){
    super.initState();
    tiantianjijin(); //这个是请求API接口数据的函数
  }

以及API获取JSON函数，这个我和主程序放在同个代码文件

tiantianjijin() async{
    var headers = {
      'Accept': '*/*',
      'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
      'Cookie': 'st_si=23513143112904; st_asi=delete; st_pvi=75677265749136; st_sp=2022-08-30%2014%3A49%3A55; st_inirUrl=https%3A%2F%2Fwww.nowcoder.com%2F; st_sn=4; st_psi=20230303151428570-112200312935-2690096899',
      'Proxy-Connection': 'keep-alive',
      'Referer': 'http://fund.eastmoney.com/',
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.57',
      'Accept-Encoding': 'gzip',
    };
                         http://api.fund.eastmoney.com/FundGuZhi/GetFundGZList?type=1&sort=3&orderType=desc&canbuy=1&pageIndex=1&pageSize=200&callback=jQuery1830052794852709326934_1677850528473&_=1677850531737
    var url = Uri.parse('http://api.fund.eastmoney.com/FundGuZhi/GetFundGZList?type=1&sort=3&orderType=desc&canbuy=1&pageIndex=1&pageSize=200');
    var res = await http.get(url, headers: headers);
    if (res.statusCode != 200) throw Exception('http.get error: statusCode= ${res.statusCode}');
    t = Tiantianjijin.fromJson(jsonDecode(res.body));
    for (var element in t!.data!.list!) { print("${element.bzdm}");}
  }

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
这个问题可能是由于 Flutter 框架的热重载机制所导致的。热重载是指在开发时修改代码后，Flutter 框架会重新编译修改过的代码，然后将新的代码加载到运行中的应用程序中，从而实现快速更新和预览 UI 的目的。
·
在您的代码中，您的 initState 函数在页面初始化时会调用 tiantianjijin 函数，该函数会请求 API 并更新您的数据。但是，由于网络请求需要一些时间来完成，所以在第一次加载时，您可能会得到一个空的数据对象，因此在 listview 组件中使用该数据对象时，就会出现空值错误。
·
当您使用热重载时，Flutter 框架会重新编译并加载修改后的代码，并且因为您已经运行了 tiantianjijin 函数并更新了数据，因此您会看到正确的数据。
·
解决这个问题的方法是在 initState 函数中添加一个 Future.delayed 函数来延迟一些时间，以便网络请求完成。您可以将延迟时间设置为几百毫秒，具体取决于您的网络速度和数据量大小。然后，在延迟时间后再次调用 tiantianjijin 函数，以确保数据已经准备好在 listview 组件中使用。