Flutter中如何解决for循环重复执行导致数据多次保存的问题

问题根源 #

你代码中imagecode、name两个上传用数组的填充逻辑写在了build方法内部的GridView生成逻辑里。Flutter的build方法会在每次触发setState时重新执行，每次重绘都会遍历所有已选的图片项，重复往数组中追加相同的图片数据，最终导致上传时数组内存在大量重复条目，出现重复上传的情况。另外未加上传防重逻辑，用户快速点击发送按钮也会触发多次上传。

修复方案 #

1. 删除build方法中往imagecode、name数组追加数据的逻辑，禁止在build中处理业务数据的持久化存储
2. 添加上传状态锁，避免重复触发上传逻辑
3. 上传时临时遍历images数组生成上传数据，不依赖全局数组存储上传内容，避免数据累加
4. 同步读取图片字节改为异步读取，避免阻塞UI

代码修改示例 #

首先在状态类中添加上传状态变量：

bool _isUploading = false;

删除build方法中GridView生成逻辑内的以下代码：

if(uploadModel.imageFile!=null){
  //base64 image
  List<int> imageBytes = uploadModel.imageFile.readAsBytesSync();
  base64Image = base64Encode(imageBytes);
  imagecode.add(base64Image);
  name.add(uploadModel.imageFile.path.split("/").last);
}

替换原有的SaveDate方法：

void saveData() async {
  // 上传中直接拦截，防止重复触发
  if (_isUploading) return;
  setState(() {
    _isUploading = true;
  });
  
  // 临时生成上传列表，不会出现重复累加问题
  List<Map<String, String>> uploadItems = [];
  for (var item in images) {
    if (item is ImageUploadModel && item.imageFile != null) {
      List<int> imageBytes = await item.imageFile.readAsBytes();
      String base64Img = base64Encode(imageBytes);
      String fileName = item.imageFile.path.split('/').last;
      uploadItems.add({
        "image": base64Img,
        "NameImage": fileName
      });
    }
  }

  // 执行上传
  for (var item in uploadItems) {
    var response = await http.post(Uri.parse(uploadEndPoint), body: item);
    if (response.statusCode == 200) {
      print('Test_Code ${response.statusCode}');
    }
  }

  // 上传完成重置状态
  setState(() {
    _isUploading = false;
  });
  
  // 可选：上传完成后清空已选图片
  // setState(() {
  //   images = List.filled(6, "Add Image");
  // });
}

最后修改发送按钮的点击逻辑，可选添加上传中置灰效果：

RaisedButton(
  child: _isUploading ? Text('上传中...') : Text('send'),
  onPressed: _isUploading ? null : () => saveData(),
),

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