如果不双击元素- OnClick Next.js SSG，则无法运行Next.js事件。

Question

除非第二次单击，否则onClick事件侦听器的所有内容都不会运行。我相信这与第一次点击时状态没有更新有关，但是我不知道如何解决这个问题。

我在SSG的每个页面上使用getStaticProps()，这可能与此有关。下面是其中一个事件的例子：

export default function Dropdown({ children, text}){
    const [open, setOpen] = useState(false)
    
    const handleClick = (e)=>{
        e.preventDefault()
           setOpen(!open)
    }
 


    return(
        <>
        <div className="relative w-full h-full" >
            <div  className="inline-flex rounded-md">
                    <button type="button"
                            onClick={(e)=>handleClick(e)}
                            className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
                            {text}
                        <svg
                            className="ml-2 -mr-0.5 h-4 w-4"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                        >
                            <path fillRule="evenodd"
                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                  clipRule="evenodd"/>
                        </svg>
                    </button>
            </div>
            <AnimatePresence>
                {open
                    ?
                    <motion.div
                        initial={{opacity: 0, scale: 0.95}}
                        animate={{opacity: 1, scale:1}}
                        exit={{opacity: 0, scale: 0.95}}
                        transition={{ease: 'easeInOut', duration: 0.2}}
                        className={`w-fit origin-top absolute z-50 mt-2 right-0 bg-white top-6 rounded-md shadow-lg`}
                        onMouseLeave={()=>{setOpen(false)}}
                    >
                        <div className={`rounded-md ring-1 ring-black ring-opacity-5`} >
                            {children}
                        </div>
                    </motion.div>

                    :<></>

                }
            </AnimatePresence>
        </div>
        </>
    )
}

我想了解一下这件事。我也尝试过动态导入，但这并没有修复任何问题。

我只和React一起工作了几年，但是以前从来没有发生过这样的事情。

Answer 1

你可以试试

setOpen(prevState => !prevState)

所以您的setState操作将知道必须更新当前值。