更新的状态值不会在反应中的函数内部更新

handleIncrease仅在单击按钮时使用当前状态调用。单击处理程序中没有任何可更新的内容。我认为您真正想要的是访问counter间隔回调中的更新状态，每秒“滴答”一次。或者更准确地说，响应isCounterContinue状态切换 false 以在达到限制时停止间隔。

使用 ref 来保存对间隔计时器的引用，并使用它来设置/清除，而不是在外壳中过时的状态。

const Timer = () => {
  const [counter, setCounter] = useState(0);
  const intervalRef = useRef();

  useEffect(() => {
    console.log({ counter });
    if (counter >= 5) {
      clearInterval(intervalRef.current);
    }
  }, [counter]);

  const handleIncrease = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setCounter((prev) => prev + 1);
    }, 1000);
  };

  const handleDecrease = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setCounter((prev) => prev - 1);
    }, 1000);
  };

  const handleStop = () => {
    clearInterval(intervalRef.current);
  };

  return (
    <>
      <div>{counter}</div>
      <div>
        <button onClick={handleDecrease}>Decrease</button>
        <button onClick={handleStop}>Stop</button>
        <button onClick={handleIncrease}>Increase</button>
      </div>
    </>
  );
};

建议

除了添加到计数中的内容之外，递增/递减处理程序基本相同。使用柯里化函数通过关闭递增值来处理这两种情况。由于“停止”处理程序共享清除间隔的逻辑，因此使用0假值这一事实并且仅重新启动间隔计时器以获取真值（即非零）数值，并对所有三个按钮使用一个处理程序。

const handleIncrease = (val) => () => {
  clearInterval(intervalRef.current);
  if (val) {
    intervalRef.current = setInterval(() => {
      setCounter((prev) => prev + val);
    }, 1000);
  }
};

...

<button onClick={handleIncrease(-1)}>Decrease</button>
<button onClick={handleIncrease(0)}>Stop</button>
<button onClick={handleIncrease(1)}>Increase</button>