0

分别在某些图像组中使用此库时遇到问题，真正发生的是，当我单击另一组图像时，它总是从最后一组中获取图像列表：

const Projects = [
        {
            id: 1,
            name: 'Intercambiador Del Norte',
            images: [
                INorte,
                INorte2,
                INorte3,
                INorte4,
                INorte5
            ],
            address: {
                lat: 15.553887638630355,
                lng: -87.9969039384759
            },
        },
        {
            id: 2,
            name: 'Intercambiador De Occidente',
            images: [
                IOccidente,
                IOccidente2,
                IOccidente3,
                IOccidente4,
                IOccidente5
            ],
            address: {
                lat: 15.43197682825506,
                lng: -88.02134910151912
            },
        },
        {
            id: 3,
            name: 'Puente Peatonal IHSS',
            images: [
                IHSS,
                IHSS2,
                IHSS3,
                IHSS4,
                IHSS5
            ],
            address: {
                lat: 15.541246406040697,
                lng: -88.01537077792884
            },
        },
        {
            id: 4,
            name: 'Paso A Desnivel Col. Santa Martha',
            images: [
                StaMartha,
                StaMartha2,
                StaMartha3,
                StaMartha4,
                StaMartha5
            ],
            address: {
                lat: 15.497648696265482,
                lng: -87.98749457873993
            },
        },
        {
            id: 5,
            name: 'Puente A Desnivel 27 Calle',
            images: [
                Veintisiente,
                Veintisiente2,
                Veintisiente3,
                Veintisiente4,
                Veintisiente5
            ],
            address: {
                lat: 15.478059823233426,
                lng: -87.97416842866024
            },
        },
        {
            id: 6,
            name: 'Ampliación De Bulevar 33 Calle',
            images: [
                TreintaYTresCalle,
                TreintaYTresCalle2,
                TreintaYTresCalle3,
                TreintaYTresCalle4,
                TreintaYTresCalle5,
            ],
            address: {
                lat: 15.47188476038704,
                lng: -88.00512399419196
            },
        },
        {
            id: 7,
            name: 'Paso A Desnivel Blvd Del Este Con Salida Vieja A La Lima',
            images: [
                SdaLima,
                SdaLima2,
                SdaLima3,
                SdaLima4,
                SdaLima5
            ],
            address: {
                lat: 15.50228931099425,
                lng: -87.99440008840381
            },
        },
        {
            id: 8,
            name: 'Paso a Desnivel en la Intersección Bulevar Del Norte y Acceso A El Zapotal',
            images: [Zapotal,INorte2],
            address: {
                lat: 15.551436185695238,
                lng: -88.00215568011586
            },
        },
    ];

代码的另一部分：

Projects.map(function(project, index) {
<Image onClick={() => setIsOpen(true)} loading="lazy" className="rounded-img img- 
  project shadow-three" src={project.images[0]} />
   {isOpen && (
      <Lightbox
          imageLoadErrorMessage="This image failed to load"
          imageTitle={project.name}
          mainSrc={project.images[photoIndex]}
          nextSrc={project.images[(photoIndex + 1) % project.images.length]}
          prevSrc={
          project.images[
            (photoIndex + project.images.length - 1) % project.images.length
          ]
          }
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
             setPhotoIndex(
                           (photoIndex + project.images.length - 1) % project.images.length
                           )
                           }
              onMoveNextRequest={() =>
                  setPhotoIndex((photoIndex + 1) % project.images.length)
              }
        />
                                        
    )}
}

我知道这可能是逻辑问题而不是库问题

提前感谢所有花时间的人

4

1 回答 1

0

当您调用灯箱时，您不会告诉它您要显示哪个图像组。这是一个如何做到这一点的例子。

你可以在我的代码框上看到它

  export default function App() {
    const [isOpen, setIsOpen] = useState(false);
    const [imagesIndex, setimagesIndex] = useState(null);
    const [photoIndex, setPhotoIndex] = useState(0);

    return (
      <>
        {Projects.map((project, index) => {
          return (
            <img
              key={project.id}
              onClick={() => {
                setIsOpen(true);
                setimagesIndex(index);
              }}
              loading="lazy"
              className="rounded-img img-project shadow-three"
              src={project.images[0]}
              alt={project.name}
            />
          );
        })}
        {isOpen && (
          <Lightbox
            imageLoadErrorMessage="This image failed to load"
            imageTitle={Projects[imagesIndex].name}
            mainSrc={Projects[imagesIndex].images[photoIndex]}
            nextSrc={
              Projects[imagesIndex].images[
                (photoIndex + 1) % Projects[imagesIndex].images.length
              ]
            }
            prevSrc={
              Projects[imagesIndex].images[
                (photoIndex + Projects[imagesIndex].images.length - 1) %
                  Projects[imagesIndex].images.length
              ]
            }
            onCloseRequest={() => {
              setIsOpen(false);
              setimagesIndex(null);
            }}
            onMovePrevRequest={() =>
              setPhotoIndex(
                (photoIndex + Projects[imagesIndex].images.length - 1) %
                  Projects[imagesIndex].images.length
              )
            }
            onMoveNextRequest={() =>
              setPhotoIndex(
                (photoIndex + 1) % Projects[imagesIndex].images.length
              )
            }
          />
        )}
      </>
    );
  }
于 2021-09-18T09:37:42.513 回答