如何在Flutter循环中等待异步API调用完成并在组件树中使用加载数据

问题根源 #

你代码的核心问题是没有对Future.wait添加await关键字，async函数里的异步任务还没执行完成，setState就已经提前触发了，此时listDataControls还是空数组，赋值给controlData后自然不会显示你预期的"has data"文本。

修复方案 #

1. 修正异步等待逻辑 #

给Future.wait加上await，保证所有API请求完成、数据存入listDataControls后再执行setState更新状态：

List<dynamic> controlData = [];
// 可选：增加加载状态提升用户体验
bool isLoading = false;

@override
initState(){
  super.initState();
  loadAllOptionData();
}

void loadAllOptionData() async {
  isLoading = true;
  // 可选：如果有需要可以先 setState 触发加载中状态的渲染
  setState(() {});
  List<dynamic> listDataControls = [];

  // 这里添加 await 等待所有异步任务执行完成
  await Future.wait(widget.fields.where((element) => element['header'] !=null).map((e) async {
    if(e['uitype']==7){
      List<dynamic> options = await ApiManager.getListData(widget.tableId, e);
      listDataControls.add({e['data'] : options});
    }
  }).toList());

  this.setState(() {
    isLoading = false;
    controlData= listDataControls;
  });
}

2. 渲染逻辑优化（可选） #

可以补充加载中状态的展示，避免页面长时间空白：

// 加载中展示
if (isLoading) {
  return const Center(child: CircularProgressIndicator());
}
// 数据加载完成展示
if(controlData.isNotEmpty){
  return Container(
    margin: const EdgeInsets.all(20),
    child: const Text('has data')
  );
}
// 无数据默认展示
return const SizedBox.shrink();

其他优化建议 #

• 建议给controlData指定更明确的类型，不要用dynamic，可以避免很多运行时类型错误
• 可以给ApiManager.getListData添加异常捕获逻辑，避免接口请求失败直接导致应用crash

内容的提问来源于stack exchange，提问作者mike hennessy