Javascript React w Gatsby：为gallery实现了顺序淡入动画，但它没有'；部署后不能立即工作

源代码如下：

部署的站点如下所示：

我试图达到的效果是简单明了的

首先，我使用这个查询加载

images

文件夹中的所有图像文件

const data = useStaticQuery(graphql`
    query {
      allFile(
        filter: {
          extension: { regex: "/(jpg)|(jpeg)|(png)/" }
          sourceInstanceName: { eq: "images" }
        }
      ) {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 800, quality: 95) {
                aspectRatio
                src
                srcSet
                originalName
                srcWebp
                srcSetWebp
                sizes
              }
            }
          }
        }
      }
    }

然后我有一个

gallery

组件，通过将这些图像分成三组来显示它们，我们可以使用

project1

、

project2

和

project3

在它们之间导航

const Gallery = ({ minWidth }) => {
  let refs = {}

  const allPics = Image().map(({ childImageSharp }, i) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    refs[i] = useRef(null)
    childImageSharp.index = i
    return childImageSharp
  })

  const firsload = allPics.slice(0, 5)
  const secload = allPics.slice(5, 10)
  const third = allPics.slice(10)

  const [imgs, setImgs] = useState(firsload)

  const thumbnails = imgs.map(img => img.fluid.srcSet.split(" ")[0])

  return (
    <>
      <ProjectsContainer>
        <Project
          onClick={() => {
            setImgs(firsload)
          }}
        >
          Project 1.
        </Project>
        <Project
          onClick={() => {
            setImgs(secload)
          }}
        >
          Project 2.
        </Project>
        <Project
          onClick={() => {
            setImgs(third)
          }}
        >
          Project 3.
        </Project>
      </ProjectsContainer>
      <Mansory gap={"0em"} minWidth={minWidth}>
        {imgs.map((img, i) => {
          return (
            <PicContainer key={img.index}>
              <Enlarger
                src={thumbnails[i]}
                enlargedSrc={img.fluid.src}
                index={img.index}
                orderIndex={i}
                onLoad={() => {
                  refs[img.index].current.toggleOpacity(1) <-- use ref to keep track of every Enlarger 
                }}
                ref={refs[img.index]}
              />
            </PicContainer>
          )
        })}
      </Mansory>
    </>
  )
}

我在代码片段中已经讲得很清楚了，在代码片段中，我通过使用

ref

来控制每个

放大机的
切换不透明度
方法，实现了顺序淡入动画

这段代码在localhost上非常有效，即在开发过程中。您可以尝试上面的codesandbox链接来查看它。但是，只有在部署页面时，错误才会出现。。单击部署的版本（），您可以看到，当浏览器首次加载页面时，某些图片丢失，因为它们的不透明度仍然为0，我怀疑这是因为
refs[img.index].current.toggleOpacity（1）
在图像上加载时不知何故没有被调用。然而奇怪的是，当你在项目之间导航时，这种动画和不透明度的改变完全没有问题，它们是正常的。当您刷新页面时，问题再次出现

我为这个问题挣扎了好几天，不知道为什么。此外，尽管我在这里使用ZEIT Now来部署站点，但当我使用Netlify进行部署时，问题并没有消失
 这不是因为部署，在生产环境中，图像加载需要更多时间。查看浏览器中的图像网络调用
除了Kishore的答案外，您可能希望在加载页面后进行查询（可能在componentDidMount中），并在内容完全加载后使用setState触发react重新呈现
 听起来像是服务器端呈现的问题（
onLoad
可能未执行）。看看有没有人能帮上忙
import Img from "react-image-enlarger"

class Enlarger extends React.Component {
  state = { zoomed: false, opacity: 0 } <--- initially every image's opacity is 0, then it shows up by being toggled opacity 1

  toggleOpacity = o => {
    this.setState({ opacity: o })
  }

  render() {
    const { index, orderIndex, src, enlargedSrc, onLoad } = this.props
    return (
      <div style={{ margin: "0.25rem" }} onLoad={onLoad}> <-- where we toggle the opacity when the element is onloaded
        <Img
          style={{
            opacity: this.state.opacity,
            transition: "opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94)",
            transitionDelay: `${orderIndex * 0.07}s`,
          }}
          zoomed={this.state.zoomed}
          src={src}
          enlargedSrc={enlargedSrc}
          onClick={() => {
            this.setState({ zoomed: true })
          }}
          onRequestClose={() => {
            this.setState({ zoomed: false })
          }}
        />
      </div>
    )
  }
}