React中map循环内调用setState仅存储最后一次循环值如何解决

React的状态更新是异步批量执行的，你在循环内多次调用setImages时，每次读取的images都是当前渲染周期的初始值，而非前一次setState更新后的值。所以每一轮更新都是基于同一个初始数组做修改，最终只有最后一次的更新结果会被保留。
另外你这里仅需要遍历执行副作用，不需要生成新的数组返回，用forEach比map更符合语义。

方案1：单次更新（更推荐） #

先拼接好所有要新增的图片对象，再统一调用一次setState，性能更高也不会出现状态覆盖问题：

// 先把所有待新增的文件转成目标格式
const addedImages = acceptedFiles.map(fileImg => ({
  rand_id: Math.floor(Math.random() * 1000 + 1),
  image_file: fileImg
}))
// 合并原有状态和新增内容，一次更新
setImages([...images, ...addedImages])

方案2：使用函数式更新 #

如果确实需要在遍历过程中逐次更新状态，要使用setState的函数式入参形式，函数参数会拿到上一次更新完成后的最新状态：

acceptedFiles.forEach((fileImg) => {
  setImages(prev => [
    ...prev,
    {
      rand_id: Math.floor(Math.random() * 1000 + 1),
      image_file: fileImg,
    },
  ])
})

你当前用Math.random()生成的rand_id有概率出现重复，如果需要保证唯一标识，建议使用Date.now() + 索引或者第三方唯一ID生成工具替换。

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