地图中的 setState 只存储最后一个循环的状态

【问题标题】：setState in the map only the last loop is stored in the state地图中的 setState 只存储最后一个循环的状态
【发布时间】：2021-10-06 15:38:36
【问题描述】：

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

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

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

之前我根据我的问题标题在stackoverflow上搜索过，所以写了这个问题。

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

【问题讨论】：

标签： reactjs use-state

【解决方案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,
]);

【讨论】：

哇，非常感谢，我的问题看似简单，却让我头晕目眩。现在它正在按照我的预期工作。