单击图库中的最终图像时，幻灯片显示“图像未定义”

Question

Have a slideshow with an index of images, I want it to close when you click the 'next' icon when its at the last image in the gallery. So far I'm able to close the gallery if you click the previous arrow on the first image, but if you click on the next arrow on the final image, the page gets the error: TypeError: Cannot read properties of undefined (reading 'image') . I assume its because it is trying to read an image that isn't there, and not something else as all of my images are showing fine. imagesData queries the data from the backend.

  const [slideIndex, setSlideIndex] = useState(0);
  const [openImage, setOpenImage] = useState(false);

  const handleOpenImage = (index) => {
      setSlideIndex(index)
      setOpenImage(true)
  }

  const handleCloseImage = () => {
      setOpenImage(false)
  }

  const slidePrev = () => {
      slideIndex === 0
      ? setSlideIndex( imagesData.length - 1)
      : setSlideIndex( slideIndex - 1)
      if(slideIndex <= 0){
        setOpenImage(false)
      }
  }

  const slideNext = () => {
      slideIndex + 1 === imagesData.length
      ? setSlideIndex(0)
      : setSlideIndex(slideIndex + 1)
      if(slideIndex > imagesData.length + 1){
        setOpenImage(false)
      }
  }

Answer 1

you should not use state value after calling the setSlideIndex callback function, because the callback function takes some time to be done so the next statement has access to the previous value

try the following code:

  const [slideIndex, setSlideIndex] = useState(0);
  const [openImage, setOpenImage] = useState(false);

  const handleOpenImage = (index) => {
      setSlideIndex(index)
      setOpenImage(true)
  }

  const handleCloseImage = () => {
      setOpenImage(false)
  }

  const slidePrev = () => {
      if(slideIndex === 0){
        setOpenImage(false)
      } else {
    setSlideIndex( slideIndex - 1)
    }
  }

  const slideNext = () => {
      if(slideIndex === imagesData.length-1 ){
        setOpenImage(false)
      } else {
      setSlideIndex(slideIndex + 1)
      }
  }

Answer 2

 you can write this logic :
 

    const slidePrev = () => {
          slideIndex === 0
          ? setOpenImage(false)
          : setSlideIndex( slideIndex - 1)
      }
    
      const slideNext = () => {
          setSlideIndex(slideIndex + 1)
          slideIndex <= imagesData.length
          ? setSlideIndex(slideIndex )
          : setOpenImage(false)
          
      }