map函数中Array.push异常更新及数组存储数据被覆盖的问题排查

先看你遇到的两个问题，根源其实都在变量作用域和异步函数的处理方式上，咱们一步步拆解：

核心问题拆解 #

1. 数组被意外覆盖/无法累积数据：你的urlArr和fileNameArr被声明在了for...in循环内部，每次循环都会重新创建一个空数组，之前循环的内容直接被丢弃，最后数组里只会保留当前循环的那一条数据。
2. 异步操作导致结果不一致：downLoadFilesAsZip是async函数，但downLoadAllAsZip里用map调用它时，没有等待异步操作完成，map本身也不会处理异步逻辑，导致控制台打印时数组可能还没完成填充，出现结果混乱的情况。

修正后的代码 #

// 调整变量作用域，确保数组能累积数据，并返回处理结果
downLoadFilesAsZip = async(item) => { 
  // 把数组声明移到循环外部，避免每次循环重置
  let urlArr = []; 
  let fileNameArr = []; 
  // 遍历数组更推荐用for...of，比for...in更安全（for...in适合遍历对象）
  for (const url of item.docLinks) { 
    let linkParts = url.split("?"); 
    let filename = linkParts[0].substring(linkParts[0].lastIndexOf('/') + 1); 
    urlArr.push(url); 
    fileNameArr.push(filename); 
  } 
  // 返回处理后的数组，让上层函数能拿到数据
  return { urlArr, fileNameArr };
} 

// 修正异步处理逻辑，等待所有分组的数据处理完成
downLoadAllAsZip = async () => { 
  if (this.state.docGroups.length === 0) return;
  
  // 用Promise.all等待所有异步操作完成，避免并发导致的顺序混乱
  const allFileData = await Promise.all(
    this.state.docGroups.map(async (item) => { 
      if(item.docLinks !== null && item.docLinks.length > 0){ 
        return this.downLoadFilesAsZip(item); 
      }
      // 空分组返回空数组，避免后续合并出错
      return { urlArr: [], fileNameArr: [] };
    })
  );

  // 把所有分组的数组合并成两个大数组，方便后续打包
  const combinedUrlArr = allFileData.flatMap(data => data.urlArr);
  const combinedFileNameArr = allFileData.flatMap(data => data.fileNameArr);

  // 这里就可以用合并后的数组做批量下载压缩包的操作了
  console.log('所有文件URL：', combinedUrlArr);
  console.log('所有文件名：', combinedFileNameArr);
}

关键修正点说明 #

• 变量作用域调整：将urlArr和fileNameArr移到循环外部，确保每次循环都往同一个数组里添加元素，实现数据累积。
• 异步逻辑优化：
  • 让downLoadFilesAsZip返回处理后的数组，上层函数能获取到有效数据；
  • downLoadAllAsZip改为async函数，用Promise.all等待所有分组的异步操作完成，避免因异步执行顺序不确定导致的结果混乱。
• 数组合并处理：用flatMap将多个分组的数组合并成两个全局数组，方便后续直接用于压缩包下载的逻辑。

如果后续在打包压缩时遇到文件与文件名不匹配的问题，记得确保每个文件的下载操作也被正确等待，避免并发下载导致的顺序错乱哦～

内容的提问来源于stack exchange，提问作者Kimi Raikkonen 9790