map中的setState只保存最后一个循环的state

Question

我正在尝试使用 map 循环中的 setState 将 object 保存到状态中，但我只获取状态中存储的最后数据.我的代码是这样的：

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

例如，假设“acceptedFiles”有5条数据，那么只有最后输入或存储在状态图像中的数据。

之前在Whosebug上根据我的问题标题进行搜索，所以写下了这个问题。

对于我的问题的所有建议，我提前感谢你。

Answer 1

images 每次循环都是一样的，所以你一直从头开始并添加一个图像。无论您最后执行哪个 setState，都会坚持下去。如果您必须重复调用 setImages，请确保始终从最新状态开始，方法是执行 set state 的函数版本：

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

但是，对于您的情况，为什么不只设置一次状态？

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

map中的setState只保存最后一个循环的state

setState in the map only the last loop is stored in the state

reactjs

use-state