useEffect() 与模态导航索引问题

如何解决useEffect() 与模态导航索引问题

我有一个显示带有图像的网格的组件。单击特定图像后，会弹出一个模式，其中包含图像任一侧的导航按钮。为了显示图像，我通过 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])

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

提前致谢。

解决方法

我已经解决了。 在 Modal.js 中，我为单击导航按钮添加了另一个状态。它以 false 开始，当单击左箭头或右箭头时，onClick 函数将 buttonClicked 状态设置为 true； onClick 还使用之前的 props 设置 imageIndex - 1 或 + 1。

然后，我添加了一个 useEffect 函数，基本上说，每次单击按钮时，将 SelectedImg 设置为具有新 imageIndex 的图像。然后将 buttonClicked 设置回 false。 [buttonClicked] 是依赖项。见代码：

const [ buttonClicked,setButtonClicked ] = useState(false);

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

    // Navigation
    const prevImage = () => {
        setImageIndex(prev => prev - 1); 
        setButtonClicked(true);
        
    }
    
    const nextImage = () => {    
        setImageIndex(prev => prev + 1); 
        setButtonClicked(true);
    }

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

使用单击事件处理程序时，无需对 imageIndex 使用 if 语句达到负数或超过数组中的图像数量。 我只是使用内联 if 语句来显示或隐藏按钮：

   { imageIndex !== 0 && <FaChevronCircleLeft className='modal-navigation left' onClick={prevImage} /> }

   { imageIndex !== docs.length - 1 && <FaChevronCircleRight className='modal-navigation right'  onClick={nextImage}/> }