如何异步构建数据数组？解决首次调用eventDetails为空的问题

我看了你的代码，问题出在你在解析第一个API响应之前就开始循环发起子请求，而且setState的时机不对，导致第一次运行时eventDetails没被填充。咱们一步步来修复：

问题根源 #

你的代码里，responseJson是类的成员变量，你在循环之后才通过setState给它赋值。第一次运行时，循环条件i < (responseJson?.length ?? 0)里responseJson还是null，循环根本没执行，所以eventDetails是空的。等setState执行完，responseJson有值了，但函数已经跑完了；第二次调用fetchPost时，responseJson已经有数据，循环才会执行，eventDetails才被填充。

修复方案 #

我们需要调整流程：先拿到第一个API的完整响应并解析，再批量发起所有子请求，等所有请求都完成后，再一起更新状态。

修改后的代码 #

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

// 假设这是你的State类
class YourWidgetState extends State<YourWidget> {
  List? responseJson;
  List eventDetails = [];

  Future<void> fetchPost() async {
    try {
      // 1. 先获取并解析第一个API的响应（用局部变量暂存，确保循环时已有值）
      final firstResponse = await http.get(
        Uri.parse("https://your-first-api-endpoint"),
        headers: {http.HttpHeaders.AUTHORIZATION: "Bearer your-auth-token"},
      );

      // 检查第一个请求是否成功
      if (firstResponse.statusCode != 200) {
        throw Exception("Failed to load main data: ${firstResponse.statusCode}");
      }

      final List localResponseJson = json.decode(firstResponse.body);

      // 2. 生成所有子API请求的Future列表
      List<Future<dynamic>> eventRequestFutures = [];
      for (var item in localResponseJson) {
        final detailUrl = Uri.parse("https://your-detail-api-endpoint/${item["id"]}");
        eventRequestFutures.add(
          http.get(
            detailUrl,
            headers: {http.HttpHeaders.AUTHORIZATION: "Bearer your-auth-token"},
          ).then((detailResponse) {
            // 检查子请求是否成功
            if (detailResponse.statusCode != 200) {
              throw Exception("Failed to load detail for id ${item["id"]}");
            }
            return json.decode(detailResponse.body);
          }),
        );
      }

      // 3. 等待所有子请求完成，拿到完整的eventDetails数据
      final List fetchedEventDetails = await Future.wait(eventRequestFutures);

      // 4. 所有数据就绪后，统一更新状态
      setState(() {
        responseJson = localResponseJson;
        eventDetails = fetchedEventDetails;
        print(eventDetails);
        print(responseJson);
      });
    } catch (error) {
      // 处理请求失败的情况，比如打印错误或提示用户
      print("Error loading data: $error");
    }
  }

  // 其他生命周期方法和build方法...
}

关键改进点 #

• 先解析第一个响应：用局部变量localResponseJson存储第一个API的解析结果，确保循环时能拿到正确的数据长度，不会出现循环不执行的情况。
• 用Future.wait批量处理异步请求：相比循环里逐个await，Future.wait可以让所有子请求并行发起，提高效率，同时会等待所有请求都完成后才继续执行。
• 统一更新状态：等responseJson和eventDetails都完全准备好后，再调用setState，这样状态更新后，列表视图就能直接渲染完整的数据。
• 错误处理：加入了状态码检查和try-catch块，避免请求失败导致程序崩溃，同时方便排查问题。

这样修改后，第一次运行fetchPost时，程序会等待所有API请求完成后再更新状态，eventDetails就不会是空的了。

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