我在react-image-lightbox包中遇到了一个问题：一旦Lightbox组件被调用，所需的图像不会被渲染，除非对代码进行了一些更改（无论是在IDE上还是简单地按下上一个/下一个图像按钮），或者我改变了视口的大小。单击map函数中的图像后，将呈现Lighbox组件，但只显示加载微调器。
这是项目中唯一一个会发生这种情况的部分。
这就是代码：

import React, { useEffect, useState } from "react";
import useAxios from "@/pages/hooks/useAxios";
import axios from "axios";
import Image from "next/image";
import { useRouter } from "next/router";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

export default function ProjectPage() {
  const router = useRouter();
  const { id } = router.query;

  const APIURL = "http://localhost:5005";
  const [restOfImages, setRestOfImages] = useState<[]>([]);
  const [projectInfo, setProjectInfo] = useState<[]>([]);

  const [photoIndex, setPhotoIndex] = useState(-1);
  const [isOpen, setIsOpen] = useState(false);
  const [imagesLoaded, setImagesLoaded] = useState();

  const project = useAxios<any>({
    url: id != null ? `${APIURL}/api/project-nr?id=${id}` : null,
    initialValue: undefined,
    transform: ([project]) => {
      if (project == null) return undefined;
      setProjectInfo(project);
      return axios
        .get(`${APIURL}/images/?project=${project.name}`)
        .then((result) => {
          console.log(
            "Result.data",
            result.data.filter((image: { source: string | string[] }) =>
              image.source.includes(`img`)
            )
          );
          setRestOfImages(
            result.data.filter((image: { source: string | string[] }) =>
              image.source.includes(`img`)
            )
          );
        });
    },
  });

  useEffect(() => {
    console.log("photoIndex updated", photoIndex);
    if (photoIndex >= 0 && restOfImages) {
      console.log("photoIndex updated", photoIndex);
      console.log("nextIndex log", (photoIndex + 1) % restOfImages.length);
      console.log(
        "prevIndex log",
        (photoIndex + restOfImages.length - 1) % restOfImages.length
      );
    }
  }, [photoIndex, restOfImages]);

 const handleClick = (event: {
    target: { getAttribute: (arg0: string) => any };
  }) => {
    const index = event.target.getAttribute("data-index");
    if (index) {
      setPhotoIndex(parseInt(index));
      setIsOpen(true);
    }
  };

  const handleClose = () => {
    setPhotoIndex(-1);
    setIsOpen(false);
  };

return (
<section>
    <div>
      {restOfImages && (
        <>
          {restOfImages
            .filter((image) => image.source.includes("img"))
            .map((image, index) => (
              <Image
                src={`${APIURL}${image.source}`}
                alt=""
                width={1000}
                height={1000}
                onClick={handleClick}
                data-index={index} // Add data-index attribute
                key={image.id}
                className="rounded cursor-pointer "
              />
            ))}
          {isOpen && (
            <Lightbox
              mainSrc={`${APIURL}${restOfImages[photoIndex].source}`}
              nextSrc={`${APIURL}${
                restOfImages[(photoIndex + 1) % restOfImages.length]
                  .source
              }`}
              prevSrc={`${APIURL}${
                restOfImages[
                  (photoIndex + restOfImages.length - 1) %
                    restOfImages.length
                ].source
              }`}
              onCloseRequest={handleClose}
              onMovePrevRequest={() => {
                setPhotoIndex(
                  (photoIndex + restOfImages.length - 1) %
                    restOfImages.length
                );
                console.log("prevIndex Function called", photoIndex);
              }}
              onMoveNextRequest={() => {
                setPhotoIndex((photoIndex + 1) % restOfImages.length);
                console.log("nextIndex Function called", photoIndex);
              }}
              enableZoom={false}
              discourageDownloads={true}
              clickOutsideToClose={true}
            />
          )}
        </>
      )}
    </div>
</section>
);

字符串
这是一个有点奇怪，因为我有控制台日志的当前，前一个和下一个图像，和路径正在很好地通过。我还控制台记录了prev和next索引，无论是在useEffect（以确保一切都被设置）还是在prop本身，我发现“nextIndex日志”或“prevIndex日志”与“nextIndex Function called”或“prevIndex Function called”相比总是正确的，我不明白为什么。