Javascript 使用react钩子切换对象内部的状态

当用户单击图像时，我正在显示覆盖图。同样，如果覆盖层已经可见，那么我想关闭它。以下是初始状态：

const [showOverlay, setShowOverlay] = useState({
   visible: false,
   xPosition: null,
   yPosition: null
});

下面是图像元素上的单击事件。此示例用于显示图像，但显然它不会将其打开/关闭

onClick={(e) => setShowOverlay({
   visible: true,
   xPosition: e.pageX,
   yPosition: e.pageY
})};

我一直在尝试使用“prevState”来切换这个特定属性，但我没有任何运气

onClick={(e,prevState) => setShowOverlay({
   visible: !prevState.visible,
   xPosition: e.pageX,
   yPosition: e.pageY
})};

---

任何建议都将不胜感激-谢谢

单击处理程序函数的第二个参数不是函数组件中随机状态值的前一个状态。若要获取上一个状态，请参考上面在组件中声明的独立状态变量：

onClick={(e) => setShowOverlay({
   visible: !showOverlay.visible,
   xPosition: e.pageX,
   yPosition: e.pageY
})};

或者使用状态设置器的回调形式：

onClick={(e) => setShowOverlay(showOverlay => ({
   visible: !showOverlay.visible,
   xPosition: e.pageX,
   yPosition: e.pageY
}))};