setState на карте только последний цикл сохраняется в состоянии

#reactjs #use-state

Вопрос:

Я пытаюсь сохранить объект в состояние, используя setState внутри цикла карты, но я получаю только последние данные, сохраненные в состоянии. мой код выглядит так:

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

например, предположим, что «Принятые файлы» содержат 5 данных, а затем только последние данные, введенные или сохраненные в образе состояния.

Ранее я искал в stackoverflow в соответствии с названием моей проблемы, поэтому я написал этот вопрос.

За все предложения по моей проблеме я заранее благодарю вас.

Ответ №1:

images это одно и то же каждый раз в цикле, поэтому вы продолжаете начинать с нуля и добавляете одно изображение. Какое бы состояние набора вы ни сделали последним, оно останется неизменным. Если вам необходимо повторно вызывать 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,
]);
 

Комментарии:

1. Вау, большое вам спасибо, моя проблема кажется простой, но у меня от нее кружится голова. Теперь он работает в соответствии с моими ожиданиями.