Javascript 使用带有Graphql和Gatsby图像的React/Gatsby中的setInterval更改图像

我试图在Gatsby/React中根据Graphql查询的结果创建一个图像更改组件。 我被卡住了，不知道在setInterval函数中该做什么。谢谢你的帮助。谢谢

import React, { useState, useEffect } from "react";
import { graphql, useStaticQuery } from "gatsby";
import Img from "gatsby-image";

function ImgRotator() {
   const imageData = useStaticQuery(graphql`
      query {
         allFile(filter: { extension: { regex: "/(jpg)|(jpeg)|(png)/" }, relativeDirectory: { eq: "rotator" } }) {
            edges {
               node {
                  id
                  childImageSharp {
                     fluid(maxWidth: 2880) {
                        ...GatsbyImageSharpFluid_withWebp
                     }
                  }
               }
            }
         }
      }
   `);

   const allImages = imageData.allFile.edges;
   const [images] = useState(allImages);
   const [displayImage, setDisplayImage] = useState(imageData.allFile.edges[0].node.childImageSharp.fluid);


   useEffect(() => {
      const interval = setInterval(() => {

         // Help! Don't know what to do here

      }, 1000);
      return () => clearInterval(interval);
   }, [displayImage]);

   return <Img fluid={displayImage} alt="" loading="eager" />;
}

export default ImgRotator; 
 

import React，{useState，useffect}来自“React”；
从“盖茨比”导入{graphql，usesticquery}；
从“盖茨比图像”中导入Img；
函数ImgRotator（）{
常量imageData=useStaticQuery（graphql`
质疑{
所有文件（筛选器：{扩展名：{regex:“/（jpg）|（jpeg）|（png）/”}，相对目录：{eq:“rotator”}）{
边缘{
节点{
身份证件
childImageSharp{
流体（最大宽度：2880）{
…GatsbyImageSharpFluid_与WebP
}
}
}
}
}
}
`);
const allImages=imageData.allFile.edges；
常量[图像]=使用状态（所有图像）；
const[displayImage，setDisplayImage]=useState（imageData.allFile.edges[0].node.childImageSharp.fluid）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
//救命！我不知道该怎么办
}, 1000);
return（）=>clearInterval（interval）；
}，[displayImage]）；
返回；
}
导出默认ImgRotator；

一个可能适合您的解决方案是：

    import React, { useState, useEffect } from "react";
    import { graphql, useStaticQuery } from "gatsby";
    import Img from "gatsby-image";
    
    function ImgRotator() {
       const imageData = useStaticQuery(graphql`
          query {
             allFile(filter: { extension: { regex: "/(jpg)|(jpeg)|(png)/" }, relativeDirectory: { eq: "rotator" } }) {
                edges {
                   node {
                      id
                      childImageSharp {
                         fluid(maxWidth: 2880) {
                            ...GatsbyImageSharpFluid_withWebp
                         }
                      }
                   }
                }
             }
          }
       `);
    
       const allImages = imageData.allFile.edges;
       const [currentImage, setCurrentImage]=useState({});
       const [currentIndex, setCurrentIndex]=useState(0);
    
    
       useEffect(() => {
          const interval = setInterval(() => {
                 
            setCurrentImage(allImages[currentIndex].node.childImageSharp.fluid)
             setCurrentIndex(currentIndex++)
                  
          }, 1000);
          return () => clearInterval(interval);
       }, [currentIndex]);
    
       return <Img fluid={currentImage} alt="" loading="eager" />;
    }
    
    export default ImgRotator; 

非常简单：

currentImage

将存储显示的图像和该图像数组中的

currentIndex

索引

在

useffect

（在

currentIndex

更改后触发）中，您定义了一个间隔，在该间隔中，它在

allImages

中查找

currentIndex

，并使用该索引设置

currentImage

。每秒都会再次触发该功能，以便更新系统

您的

gatsby图像

将根据该间隔显示

currentImage

：

   return <Img fluid={currentImage} alt="" loading="eager" />;

返回；

不难想象，您需要一个计数器/索引（状态），应该在间隔中增加，在最大值上重置。。。基本反应状态动作。。。自动递增计数器示例非常感谢您。你的解决方案有效。在我的设置中只有一个问题：图像在更改之间闪烁，就像它们被卸载和重新装载一样。有没有办法在图像之间没有间隙地获得平滑的更改？@FerranBuireu不在“纯反应”中。。。旧节点刚刚删除，不可能淡出/滑出。。。css只能影响出现的元素。。。你必须使用一些动画库。。。或者尝试使用关键点渲染2个（上一个+当前）图像

   return <Img fluid={currentImage} alt="" loading="eager" />;