javascript - 尝试在 React js 中显示上传图像的预览时出现图像为空的错误

Question

我有这个功能可以上传多张图片并且它可以工作，现在我需要显示用户选择的所有图片的预览。我尝试使用 map和 forEach尝试循环播放并显示图像，但它不起作用。 console.log(images)正在显示上传图片的网址，但 images.map()或 images.ForEach正在引发空错误。谁能告诉我这有什么问题？我是新手，所以需要一些帮助。
这是代码:

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>

Answer 1

与您的setImages({ images: imageArray })调用，您将获得 images 的值常量为:

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

所以你必须以 images.images 的身份访问它，或者更确切地说，将其设置为 setImages(imageArray)正如您所期望的那样可以访问。
此外，访问状态变量并使用 map而不是 forEach ，而不是 imageArray .所以而不是 imageArray.forEach(...)使用 images.map(...) . Map 返回一个数组，其中包含从函数调用返回的值。鉴于 forEach返回未定义。