时间戳

首页 > 解决方案 > 为什么在 React Hooks 中循环内的 javascript 触发的点击事件不会每次都更新状态？

javascript - 为什么在 React Hooks 中循环内的 javascript 触发的点击事件不会每次都更新状态？

问题描述

我有一个复选框和一个按钮。

当我单击复选框时，count使用 更新setCount并增加 1。

当我单击按钮时，我想单击checkbox10 次。

因此，setCount应该更新count值10 次，最终值count应该是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(count + 1)}
      />
    </div>
  );
}

但问题是当我点击按钮时， count 只增加了1。我确信它与React Hooks的异步性有关。

如何使复选框单击并正确更新状态 10 次？

标签： javascriptreactjsreact-hooks

解决方案

使用 react 时直接访问 DOM 元素通常不是一个好主意。我不明白为什么这可能无法解决您的问题：

 <button
    id="start"
    onClick={(e) => {
       setCount(pc=>pc+10)
    }}
 >

如果您需要查看点击事件，您可以随时执行一些异步操作，在某种超时期间增加计数值。但是，如果您确实需要在复选框上执行单击事件，则可以使用refs。

推荐阅读