Flutter中将API响应存入数组时最后一个元素未存储如何解决

问题根因 #

• 你使用listen()方法订阅响应流，该方法是异步非阻塞的，注册回调后代码会立刻向下执行打印列表，此时回调还未完成执行，最新的返回值还没被存入列表。
• 当前打印时机不对，即使后续回调存入了值，你也看不到更新后的列表内容。

修复方案 #

把流的订阅改为同步等待的写法，等响应内容完全读取后再存入列表，再执行后续操作：

var selectedImage = [];
if (_image.isNotEmpty) {
  for (var img in _image) {
    var request = http.MultipartRequest(
        'POST', Uri.parse('url'));
    request.fields.addAll({'userPath': "${widget.scanQr}"});
    var process = await http.MultipartFile.fromBytes(
        'file', File(img.path).readAsBytesSync(),
        filename: img.path.split("/").last,
        contentType: MediaType('image', 'jpg'));
    request.files.add(process);
    var response = await request.send();
    print(response.statusCode);
    if (response.statusCode == 200) {
      // 改用await同步等待流读取完成
      String value = await response.stream.transform(utf8.decoder).join();
      print("The value is $value");
      selectedImage.add(value);
      print(selectedImage);
    }
  }
  // 所有循环执行完后再打印完整列表
  print("最终列表：$selectedImage");
}

排查验证方法 #

• 先确认所有请求的response.statusCode都是200，排除请求失败的情况
• 把列表打印移到整个for循环结束之后，确认最终的列表长度是否和上传的图片数量一致
• 检查接口返回值是否符合预期，确认value变量每次都能正常拿到非空结果

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