React拖拽多文件上传state更新异常 仅单个文件被添加问题

实现文件拖拽上传功能时出现状态更新不符合预期的问题：

• 预期效果：用户拖拽多个文件到上传区域时，所有拖拽文件都会被添加到file_list列表中
• 实际表现：每次拖拽多个文件时，最终仅有1个文件被成功加入列表
• 已验证信息：拖拽操作获取的files文件集合经控制台打印确认，结构正常、包含全部拖拽的文件，符合多文件预期；原设计逻辑为遍历files中的每个文件元素，逐个追加到file_list状态中；onFileAdded为封装的file_list状态更新方法，多次测试问题稳定复现，初步怀疑问题与扩展运算符使用有关。

当前错误的状态更新实现如下：

files.forEach(element => {
  onFileAdded({
    file_list: [
      ...file_list,
      element
    ]
  })
});

问题与扩展运算符语法本身无关，核心原因是同步循环内多次触发状态更新时的闭包旧值问题：

1. forEach是同步执行逻辑，整个遍历过程会在同一个状态更新批次内完成
2. 循环内每一次调用onFileAdded时，读取到的file_list都是循环开始前捕获到的初始状态值，无法获取前一次循环更新后的最新列表
3. 每一次更新生成的新列表都是「初始旧列表+当前单个文件」，最后一次循环触发的更新会覆盖前面所有更新的结果，最终列表里只会保留最后一个遍历到的文件。

优先选择单次合并更新的方案，性能更优，不会触发多次无效的状态更新与视图重渲染：

// 一次性合并原有列表和所有拖拽文件，仅触发一次状态更新
onFileAdded({
  file_list: [
    ...file_list,
    ...files
  ]
})

如果需要在加入列表前对单个文件做校验、格式处理等操作，可以先遍历处理完所有文件，再一次性更新状态：

const processedFiles = []
files.forEach(file => {
  // 此处可添加单文件校验、重命名、元信息提取等逻辑
  if (file.type.startsWith('image/') && file.size < 10 * 1024 * 1024) {
    processedFiles.push(file)
  }
})
onFileAdded({
  file_list: [
    ...file_list,
    ...processedFiles
  ]
})

如果你的onFileAdded方法支持函数式更新（即传入更新函数，参数为上一次更新后的最新状态，常见于React、Vue等框架的状态更新API），也可以通过函数式更新保证每次读取到最新状态，逐次追加文件，但该方案性能弱于单次更新：

files.forEach(element => {
  onFileAdded(prev => ({
    file_list: [...prev.file_list, element]
  }))
})

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