React点击计数器每次点击递增2而非1的问题求助

问题根源 #

你同时做了两件导致计数翻倍的操作：

• 在<h2>元素上通过React的onClick绑定了clickHandler
• 又通过useEffect给父级<div>添加了原生click事件绑定，且依赖项包含clickCount（核心问题是双重绑定）

当点击<h2>时，DOM事件冒泡机制会让事件先触发<h2>的点击事件，接着冒泡到父级<div>触发原生绑定的事件，同一个clickHandler被执行两次，所以计数器每次加2。

解决方案（推荐第一种） #

方案1：移除多余的原生事件绑定

React的合成事件系统已经足够处理点击逻辑，完全不需要额外通过原生事件绑定。删除整个useEffect代码块和无用的useRef即可，同时优化setClickCount为函数式更新避免闭包问题：

function MyComponent() {
  const [clickCount, setClickCount] = useState(0);

  const clickHandler = () => {
    // 函数式更新确保拿到最新的count值
    setClickCount(prevCount => prevCount + 1);
  };

  return (
    <div className="my-component">
      <h2 onClick={clickHandler}>
        My Component ({clickCount} clicks)
      </h2>
    </div>
  );
}
export default MyComponent;

方案2：阻止事件冒泡（不推荐，仅作了解）

如果一定要保留双重绑定，在点击事件中阻止冒泡，避免父级事件触发：

const clickHandler = (e) => {
  e.stopPropagation();
  setClickCount(prevCount => prevCount + 1);
};

内容的提问来源于stack exchange，提问作者Ced