onClick 回调在反应组件中触发两次，如何防止它两次切换布尔值？

如何解决onClick 回调在反应组件中触发两次，如何防止它两次切换布尔值？

我正在开发一个 Gatsby and Sanity 站点（我使用了这个启动器：https://github.com/sanity-io/example-company-website-gatsby-sanity-combo，但此后更新了软件包并进行了许多更改）。

但是，我注意到我无法在 JSfiddle 中重新创建的一种奇怪的 React 行为。我有一个需要在组件状态中切换布尔值的 React Class 组件。很容易。但是在测试我的所有点击处理程序时都会触发两次。所有这些，甚至是我为了测试这种行为而制作的新的。我已经通过将 console.log 放在 setState 之前验证它是点击处理程序而不是 setState（我得到两个 console.logs）。我听说 React 在调试模式期间触发 setState 两次以帮助查找错误，但这似乎是 onClick 处理程序行为的问题。

这意味着每次我切换布尔值时，它都会切换两次，因此保持不变。

这里基本上是我的代码（不是从我的文件中复制的，但回调处理是相同的）。

class SlideShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      overlayOpen: false,}
  }


  toggleOverlay = () => {
    this.setState(prevstate => ({
      overlayOpen: !prevstate.overlayOpen
    }));
  }
  
  render() {
    return (
      <div>
        <div onClick={() => this.toggleOverlay()}>Click me!</div>
        <h3>{this.state.overlayOpen.toString()}</h3>
      <div>
    )
  }

这是否与我遗漏的 Gatsby 中的 React 设置有关？在 JSfiddle 中，这段代码就像一个魅力，但在我的项目中它会触发两次。我想不通。