useEffect Hook内部的setInterval无法按预期工作

Question

我有一个如下的功能组件。该组件充当1秒倒计时时钟，可以启动，停止和重置。我正在使用useEffect挂钩，并将其传递给名为active的状态变量，因此在呈现组件且active为true时将创建间隔。

但是，这表现出意想不到的方式。

该计时器将倒计时一次（从10到9），但是将停止并且不会继续进行8。从我的调试中，我可以看到countDown被调用为1秒，因此该间隔仍然有效。但是，由于我不清楚的原因，在第一次滴答之后状态不会被更新。

function CountContainer(props) {
  let [count, setCount] = useState(10);
  let [active, setActive] = useState(false);
  let [timer, setTimer] = useState(null);

  let countDown = () => {
    setCount(count - 1);
  };


 // THIS GUY ISNT WORKING AS EXPECTED 

  useEffect(
    () => {
      if (active && count > 0) {
        setTimer(setInterval(countDown, 1000));
      } else if (count == 0) {
        setActive(false);
      }

      return () => {clearInterval(timer)}
    },
    [active]
  );


  // HELPERS
  let reset = () => {
    clearTimer();
    setActive(false);
    setCount(10);
  };
  let clearTimer = () => {
    clearTimeout(timer);
    setTimer(null);
  };

  return (
    <div className="App">
      {count}
      {count > 0 && (
        <button
          onClick={() => {
            clearTimer();
            setActive(!active);
          }}
        >
          {active ? "Off" : "On"}
        </button>
      )}
      <button onClick={reset}>reset</button>
    </div>
  );
}