React Hooks中循环触发JS点击事件无法每次更新状态的原因及解决方法

问题根因 #

• 你的复选框点击回调使用的是setCount(count + 1)这种基于闭包值的状态更新写法：同一次渲染周期内，回调拿到的count永远是当前渲染的初始值（也就是0），10次点击触发的都是setCount(0 + 1)，React会合并重复的状态更新，最终count只会变成1。
• 直接通过原生DOM API调用元素点击事件的方式不符合React的开发最佳实践，容易出现和预期不符的状态同步问题。

解决方案 #

方案1：仅修改状态更新逻辑（保留原模拟点击逻辑） #

把setCount的更新改为函数式更新写法，每次更新都会基于上一次的最新状态计算，就能正确叠加10次，同时保留原有的模拟复选框点击逻辑：

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count updated to :", count);
  }, [count]);

  return (
    <div className="App">
      <button
        id="start"
        onClick={(e) => {
          for (let i = 0; i < 10; i++) {
            document.getElementById("check").click();
          }
        }}
      >
        start
      </button>
      <input
        id="check"
        type="checkbox"
        value={count}
        onClick={(e) => setCount(prev => prev + 1)} // 仅修改这一行即可
      />
    </div>
  );
}

方案2：抽离公共逻辑，避免操作DOM（更推荐） #

把计数加1的逻辑抽成公共函数，不需要模拟DOM点击，代码更易维护，性能也更好：

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count updated to :", count);
  }, [count]);

  // 抽离公共的计数+1逻辑
  const increment = () => setCount(prev => prev + 1);

  return (
    <div className="App">
      <button
        id="start"
        onClick={(e) => {
          // 如果不需要触发复选框的其他点击副作用，直接写setCount(prev => prev +10)即可
          for (let i = 0; i < 10; i++) {
            increment();
          }
        }}
      >
        start
      </button>
      <input
        id="check"
        type="checkbox"
        value={count}
        onClick={increment}
      />
    </div>
  );
}

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