如何在 React 中的功能组件上使用 setInterval 更新状态答案

【问题标题】：How to update state using setInterval on functional components in React如何在 React 中的功能组件上使用 setInterval 更新状态
【发布时间】：2022-02-19 21:38:26
【问题描述】：

我正在尝试实现倒计时，但状态未按预期更新。它停留在初始值 30。我不知道如何解决它。谁能帮帮我？

  const [timer, setTimer] = useState(30);

  function handleTimer() {
    const interval = setInterval(() => {
      setTimer((count) => count - 1);
      if (timer <= 0) {
        clearInterval(interval);
      }
    }, 1000);
  }

  useEffect(() => {
    handleTimer();
  }, []);

【问题讨论】：

嗨@Kelson Batista，我编辑了答案，请再次检查

标签： reactjs react-hooks timer setinterval

【解决方案1】：

问题是关于 javascript 闭包的，你可以阅读更多关于它的信息here

此外，Dan 有一个完整详细的article 谈论这个具体问题。我强烈建议你阅读它。

这里有一个针对您的问题的快速解决方案和演示。首先，每次重新挂载组件时都会执行useEffect。这可能发生在许多不同的情况下，具体取决于您的代码。因此，useEffect 每次都会重新开始并关闭新数据。

所以我们只需要将我们的值保存到 ref 中，这样我们就可以在每次重新渲染时使用相同的引用。

// Global Varibales
const INITIAL_TIMER = 30;
const TARGET_TIMER = 0;

// Code refactoring
  const [timer, setTimer] = useState(INITIAL_TIMER);
  const interval = useRef();

  useEffect(() => {
    function handleTimer() {
      interval.current = setInterval(() => {
        setTimer((count) => count - 1);
      }, 1000);
    }

    if (timer <= TARGET_TIMER && interval.current) {
      clearInterval(interval.current);
    }
    if (timer === INITIAL_TIMER) {
      handleTimer();
    }
  }, [timer]);

【讨论】：

它就像@AhmedTarek 的魅力，完美的解释。非常感谢！