我有一个显示带有图像的网格的组件。单击特定图像后，会弹出一个模式，其中包含图像任一侧的导航按钮。为了显示图像，我通过 docs 数组进行映射并访问 doc.url。还有一个 onClick 传递 doc.url 和项目的索引，然后更新 selectedImg 的状态。这是 ImageGrid.js 组件代码：

const ImageGrid = ({ setSelectedImg,imageIndex,setImageIndex }) => {
   const { docs } = useFirestore('images');
    console.log('current docs',docs)

    
    const clickHandler = (url,index) => {
    setSelectedImg(url);
    setImageIndex(index);
    }

    return (
        <div classname='img-grid'>
            { docs && docs.map((doc,index) => (
                <motion.div classname='img-wrap' key={doc.id}
                layout
                whileHover={{ opacity: 1 }} 
                whiletap={{ scale: 0.9 }}
                onClick={() => clickHandler(doc.url,index)}
                >
                    <motion.img src={doc.url} alt='uploaded pic' 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1}}
                    transition={{ delay: 1 }}
                    />
                </motion.div>
            )) }
        </div>
    )
}

然后我有一个 Modal.js 组件，其中包含两个 onClick 函数，用于模式图像旁边的上一个和下一个按钮。如下：

  const Modal = ({ selectedImg,setSelectedImg,setImageIndex }) => {
    
    const { docs } = useFirestore('images');


    const handleclick = (e) => {
        if(e.target.classList.contains('backdrop'))
        setSelectedImg(null);
    }

    // Navigation
    const prevImage = () => {
         setImageIndex(prev => prev - 1); 
         setSelectedImg(docs[imageIndex].url);
    }

    const nextImage = () => {    
       setImageIndex(prev => prev + 1); 
       setSelectedImg(docs[imageIndex].url);
    }


    return (
        <motion.div classname='backdrop' onClick={handleclick}
            initial={{ opacity: 0}}
            animate={{ opacity: 1}}
        >

            <FaChevronCircleLeft classname='modal-navigation left' onClick={prevImage} />

            <motion.img src={selectedImg} alt='enlarged pic' 
            initial={{ y: '-100vh'}}
            animate={{ y: 0 }}
            />

            <FaChevronCircleRight classname='modal-navigation right'  onClick={nextImage}/>
            
               
        </motion.div>
    )
}

这确实有效，但问题是，一旦您从网格中选择图像并且第一次出现模态，如果您单击任一导航按钮，则什么也不会发生。然后在第二次单击时，它开始工作。根据我的理解，这是因为按钮被点击后imageIndex状态正在更新，所以需要使用useEffect。

我尝试在 Modal.js 中使用 useEffect，它只有在 [imageIndex] 是一个依赖项时才有效。我一直收到错误消息，因为甚至在使用模态导航之前就使用了 setImageIndex。

// Navigation
    const prevImage = () => {
         setImageIndex(prev => prev - 1); 
    }

    const nextImage = () => {    
       setImageIndex(prev => prev + 1); 
    }

    useEffect(() => {
        setSelectedImg(docs[imageIndex].url);
    },[imageIndex])

如何传递当前图像的索引并使其与单击时的导航按钮相对应？

提前致谢。