按住递减按钮时计数器出现负值，已加限制条件仍异常（附Codesandbox）

架构老林

2026-8-7

问题分析与解决方案

你的问题核心是React状态更新的异步性导致的：当按住递减按钮时，定时器循环调用decrease函数，但decrease里判断count > 0时，拿到的可能是旧的状态值（React不会同步更新状态），所以即使count已经变成0，定时器还会继续触发几次，导致出现负值。

修正方案

使用函数式更新确保拿到最新状态
把decrease函数改成用函数式更新setCount，这样每次都能获取到最新的count值，同时在更新时直接做限制：
```
const decrease = () => {
  setCount(prevCount => prevCount > 0 ? prevCount - 1 : 0);
};
```
这种方式能保证每次更新都基于最新的状态，避免旧值判断带来的问题。

及时停止定时器（可选增强）
你还可以在定时器的回调里，当检测到count已经为0时，主动清除定时器，避免无效的函数调用：
首先用useRef存储定时器ID和实时count值：

import { useState, useRef, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const decrementInterval = useRef(null);
  const countRef = useRef(count);

  // 同步count到ref
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const decrease = () => {
    if (countRef.current > 0) {
      setCount(prev => prev - 1);
    } else {
      clearInterval(decrementInterval.current);
    }
  };

  const handleDecrementPress = () => {
    decrease();
    decrementInterval.current = setInterval(decrease, 100);
  };

  const handleDecrementRelease = () => {
    clearInterval(decrementInterval.current);
  };

  // 其余代码保持不变...
}

这样当count降到0时，定时器会被立即清除，不会再触发无效的递减操作。