ReactJS：如何通过for循环与事件处理使计数器停在51？

原代码的问题 #

• 直接在循环中调用setInfo时，React的状态更新是异步批量处理的，每次更新都基于函数执行时的旧info.count值（初始为0），所以循环结束后count只会变成1，无法累加至51。
• 没有实现“持续调用直至达标”的逻辑，一次性循环无法模拟持续计数的效果，也未做停止判断。

修正后的代码 #

我们可以使用setInterval实现持续计数，同时利用函数式状态更新确保每次都基于最新状态，达到51时清除定时器停止计数：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [info, setInfo] = useState({
    title: "Current count",
    count: 0
  });

  const startCounter = () => {
    // 先清除可能存在的定时器，避免重复触发
    const timer = setInterval(() => {
      setInfo(prevInfo => {
        const newCount = prevInfo.count + 1;
        // 当计数达到51时清除定时器
        if (newCount === 51) {
          clearInterval(timer);
        }
        // 保留title字段，只更新count
        return { ...prevInfo, count: newCount };
      });
    }, 100); // 100ms间隔，可根据需要调整计数速度
  };

  return (
    <div>
      <h2>{info.title}:</h2>
      <div>{info.count}</div>
      <button onClick={startCounter}>Run state updater</button>
    </div>
  );
}

关键说明 #

• 函数式状态更新：使用setInfo(prevInfo => ...)，确保每次更新都基于最新的状态值，避免异步更新导致的累加错误。
• 定时器控制：用setInterval实现持续调用，每次更新时判断是否达到目标值51，达标后立即清除定时器停止计数。
• 状态完整性：更新时使用{ ...prevInfo, count: newCount }保留原状态中的title字段，避免丢失其他状态数据。

如果需要贴合原代码“遍历0-100偶数”的逻辑，本质最终计数也是51，直接将目标设为51更高效，无需额外遍历判断。

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