Блог

У меня есть эта функция для загрузки нескольких изображений, и она работает, теперь мне нужно показать предварительный просмотр всех изображений, выбранных пользователем. Я пытался использовать map и forEach пытаться перебирать и показывать изображения, но это не работает. console.log(images) показывает URL загруженных изображений, но images.map() или images.ForEach выдает ошибку null. Кто-нибудь может сказать мне, что в этом не так? Я новичок в react, поэтому мне нужна помощь.

Это код:

 const fileObj = [];
const imageArray = [];
const [images, setImages] = useState(null); 

const uploadMultipleFiles = (e) => {
    if (e.target.name === 'images') {
        fileObj.push(e.target.files)
        for (let i = 0; i < fileObj[0].length; i  ) {
            imageArray.push(URL.createObjectURL(fileObj[0][i]))
            // console.log(imageArray)
        }
        setImages({ images: imageArray })
    }
}

{console.log(images)}
<div className="form-group multi-preview">
  { {(imageArray || []).map(url => (
         <img src={url} alt="" />
      ))} 
  }
</div>
                    
 <label htmlFor="images">
      <input
         accept="image/*"
         className={classes.input}
         id="images"
         onChange={uploadMultipleFiles}
         name="images"
         type="file"
         multiple
         ref={register({required:true})}
     />
     Images
     <IconButton color="primary" component="span">
         <PhotoCamera style={{fontSize:"xx-large"}} />
     </IconButton>
  </label>
  

При вашем setImages({ images: imageArray }) вызове вы получите значение images const равным:

 images = {images: [...]} // [...] is the imageArray
  

поэтому вам нужно будет получить к нему доступ как images.images , или, скорее, установить его как setImages(imageArray) , который будет доступен, как вы ожидаете.

Кроме того, получите доступ к переменной состояния и используйте map вместо forEach , а не imageArray . Поэтому вместо imageArray.forEach(...) использования images.map(...) . Map возвращает массив со значениями, возвращенными из вызовов функций. Тогда forEach как возвращает значение undefined.

 {imageArray.length>0 ? 
<div>
  {imageArray.map((element)=>{
  return(
    <img src={element} alt="" />
    )
  })}
</div>
:null}
  

Надеюсь, это решит