Next.js - 刷新页面时加载不关闭

Question

所以我在 next.js 中构建我的投资组合，为了避免显示部分加载的画廊图像，我想使用“正在加载”state，一旦所有照片都完美加载，它将关闭（变为 0）。 除非我刷新页面，否则它工作得很好。 刷新页面时，加载不会变为 0 (false)。 当我更改类别并返回时，它再次开始正常工作。 每当我刷新页面时，只会在页面上停止。 可能是什么问题？

PS 当“加载”为 1（真）时，网格的不透明度为 0。

提前非常感谢！

import { GalleryLayoutStyle } from '../../style/componentStyles/GalleryLayoutStyle'
import { useContext, useEffect, useState } from 'react'
import Masonry from 'react-masonry-css'

const Gallery = ({ data }) => {

  const [loading, setLoading] = useState(1)
  const [count, setCount] = useState(0)

  const allImagesCount = data.length

  const increaseCount = () => {
    setCount((prev) => prev + 1)
  }

  useEffect(() => {
    setLoading(1)
  }, [])

  useEffect(() => {
    if (count == allImagesCount) {
      setLoading(0)
    }
  }, [count])


  return (
    <GalleryLayoutStyle loading={loading}>
      {loading == 1 ? <h1>Loading</h1> : null}
      <div className="grid">
        <Masonry className="my-masonry-grid" columnClassName="my-masonry-grid_column">
          {data.map((item) => (
            <div className="gallery-box" key={item.id}>
              <img src={item.url} onLoad={increaseCount} />
              <div className="overlay">
                <div className="title">
                  <h4>{item.title}</h4>
                </div>
                <div className="zoom">
                  <img src="/icons/loupe.svg" alt="" />
                </div>
              </div>
            </div>
          ))}
        </Masonry>
      </div>
    </GalleryLayoutStyle>
  )
}

export default Gallery

Answer 1

在我看来（几乎）一切都很好。 我只会改变一点点。 不要将 loading 最初设置为 1，而是 0。使其仅取决于count 。

也许试试这个：

const Gallery = ({ data }) => {

  const [loading, setLoading] = useState(0)
  const [count, setCount] = useState(0)

  const allImagesCount = data.length

  const increaseCount = () => {
    setCount((prev) => prev + 1)
  }

  useEffect(() => {
    if (count === allImagesCount) {
      setLoading(0)
    }else{
      setLoading(1)
    }
  }, [count])
....