React多图片上传时map函数遍历数组仅执行一次的解决方法

核心问题 #

1. 文件存储结构错误：e.target.files是FileList对象，你直接将整个FileList存入files数组，导致files变成嵌套结构（比如[FileList(2), FileList(1)]），后续map遍历的是每个FileList而非单个图片文件。
2. 状态更新的闭包问题：多次调用setThumpnails([...thumpnails, thump])时，thumpnails始终是当前effect触发时的旧值，会导致最终只保留最后一次更新结果。
3. 遍历逻辑错误：用file[idx]取当前遍历项的元素，不符合嵌套结构的取值逻辑，当idx超过当前FileList长度时会取不到有效文件。

修正后的代码 #

const articleImg = (e) => {
  if (e.target.files && e.target.files.length > 0) {
    // 将FileList转为数组并合并，用函数式更新获取最新状态
    setFiles(prevFiles => [...prevFiles, ...Array.from(e.target.files)]);
  }
};

useEffect(() => {
  const processThumbnails = async () => {
    const newThumbnails = [];
    // 遍历平铺的单个File对象数组
    for (const file of files) {
      const thumb = await thumbnail(file);
      newThumbnails.push(thumb);
    }
    // 批量更新缩略图数组，避免多次setState的闭包问题
    setThumpnails(prev => [...prev, ...newThumbnails]);
  };

  files.length > 0 && processThumbnails();
}, [files]);

关键修改点 #

• 平铺文件数组：用Array.from(e.target.files)把FileList转为普通数组，再展开合并到files中，确保files是单个File对象的平铺数组。
• 函数式更新状态：更新files和thumpnails时使用函数式更新，获取最新状态值，避免闭包导致的旧值问题。
• 批量处理缩略图：用for...of遍历（更适合异步串行处理），先收集所有缩略图再一次性更新状态，减少重渲染次数，同时避免状态覆盖。

内容的提问来源于stack exchange，提问作者Captai-N