反应图像库在设置新细节时会自动返回到上一张照片

Question

我的页面上有一个像下面这样的图库。当您按下按钮更改照片时，它可以工作并设置新的说明，但随后它立即返回到上一张照片。它是由onSlide={setImageDeteails}引起的，我已经苦苦挣扎了一段时间，但找不到解决方法。你有什么主意吗？提前谢谢你的帮助。

    const StyledImageDetails = styled.div`
      padding: 1em 2em;

      .title {
        font-weight: 700;
        color: ${(props) => props.theme.mainColor};
      }

      .desc {
        display: none;
      }

      @media (min-width: 1000px) {
        padding-left: 2em;
        .desc {
          display: block;
        }
      }
    `;
    const AsideGallery = ({
  active,
  images,
  closeModal,
  openModal,
  title,
  icon,
  currentImage,
  setImageDetails
}) => {
  return (
    <div>
      <StyledAsideGallery>
        <CustomIconHeading icon={icon} text={title} />
        <StyledGalleryWrapper
          onClick={openModal}
          bgd={images.length && images[0].original}
        >
          <StyledPreviewWrapper>{showImages(images)}</StyledPreviewWrapper>
          <StyledImageTitle>
            {images.length && images[0].originalTitle} <ArrowIcon />
          </StyledImageTitle>
        </StyledGalleryWrapper>
      </StyledAsideGallery>

      <ReactModal
        isOpen={active}
        onRequestClose={closeModal}
        shouldCloseOnEsc={true}
        shouldCloseOnOverlayClick={true}
        overlayClassName="ReactModal__Overlay-custom"
        className="ReactModal__Content-custom"
      >
        <ModalHeader closeModal={closeModal} icon={icon} text={title} />
        <StyledModalWrapper>
          <StyledRow>
            <StyledColumn width="70">
              <ImageGallery
                items={images}
                lazyLoad={true}
                slideDuration={750}
                showPlayButton={false}
                showBullets={false}
                showFullscreenButton={false}
                showThumbnails={true}
                renderRightNav={renderRightNav}
                renderLeftNav={renderLeftNav}
                onSlide={setImageDetails}
              />  
            </StyledColumn>
            <StyledColumn width="30">
              <StyledImageDetails>
                <p className="title">{images[currentImage] && images[currentImage].originalTitle}</p>
                <p className="desc">{images[currentImage] && images[currentImage].description}</p>  
              </StyledImageDetails>
            </StyledColumn>
          </StyledRow>
        </StyledModalWrapper>
      </ReactModal>
    </div>
  );
};

Answer 1

好，我找到了。这是我的react-image-gallery版本中的错误。我已对其进行更新，并且可以正常工作。