如何在反应中从数组中映射出预加载的图像?

Posted

技术标签:

【中文标题】如何在反应中从数组中映射出预加载的图像?【英文标题】:How to map out preloaded images from an array in react? 【发布时间】:2021-02-05 10:24:04 【问题描述】:

我正在尝试为图像轮播预加载一些图像并将它们存储在数组中。到目前为止,我似乎一切正常,但当我尝试将数组中的图像映射到 JSX 时出现错误。

错误:对象作为 React 子对象无效(找到:[object htmlImageElement])。如果您打算渲染一组子项,请改用数组

谁能告诉我为什么?

作为后续问题,我的 setInterval(将用于旋转图像)没有启动,我不知道为什么,因此非常感谢任何帮助。

import React,  useEffect, useState  from 'react'
import  CSSTransition  from 'react-transition-group'
import  ImageCarouselContainer, ImageCarouselSlide  from './imagecarousel.styles'
const images = [
      'https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2555&q=80',
      'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2551&q=80',
      'https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2551&q=80'
]

const ImageCarousel = () => 
      const [activeImage, setActiveImage] = useState(1);
      const [imagesArr, setImagesArr] = useState([])
      
      useEffect(() => 
            let loadedImages = []
            images.forEach(el => 
                  let img = new Image()
                  img.onload = () => 
                        loadedImages.push(img);
                  
                  img.src = el
            )
            setImagesArr(loadedImages);
            const counter = () => 
                  if(activeImage < imagesArr.length) 
                        setActiveImage(activeImage + 1)
                   else 
                        setActiveImage(0) 
                  
            
            
            const interval = setInterval(counter, 1000)
            
            return () => 
                  clearInterval(interval);
            
            
      , [])

      return (
            <ImageCarouselContainer>

                        
                        imagesArr &&
                        imagesArr.map((el, idx) => (
                        <CSSTransition
                              classNames='image'
                              timeout=1000
                              key=idx
                              in=activeImage === idx ? true : false
                              unmountOnExit
                        >
                              <ImageCarouselSlide 
                                    
                              >
                              el
                              </ImageCarouselSlide>
                        </CSSTransition>  
                        ))
                  

            </ImageCarouselContainer>
      )


export default ImageCarousel

【问题讨论】:

能把错误信息放上去吗? 对不起,它的:错误:对象作为 React 子级无效(找到:[object HTMLImageElement])。如果您打算渲染一组子项,请改用数组。 尝试将其包裹在 Fragment 上 el 是一个 Image 对象。那么,el 可能会抛出错误? 【参考方案1】:

您尝试将纯 html 对象而不是对渲染功能做出反应的组件。所以它没有道具等......

改变

            images.forEach(el => 
                  let img = new Image()
                  img.onload = () => 
                        loadedImages.push(img);
                  
                  img.src = el
            

            images.forEach(el => 
                  let img = new Image()
                  img.onload = () => 
                        loadedImages.push(<img src=el>); 
                  
                  img.src = el
            

【讨论】:

以上是关于如何在反应中从数组中映射出预加载的图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应应用程序中从数据库中获取和显示图像

如何在反应中从状态数组中添加或删除项目

如何在 Swift 中从文件夹中获取 UIImage 数组?

如何在本机反应中从平面列表中设置 Json 数组

如何在颤动中从 api url 加载图像?

在本机反应中从数组上传数据到 Firebase 存储和 Firebase 数据库