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

Question

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

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

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

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

Answer 1

问题是关于 javascript 个闭包，您可以阅读更多相关内容 here

此外，Dan 对这个具体问题进行了全面详细的 article 讨论。强烈建议您阅读。

这是针对您的问题的快速解决方案和演示。首先，每次重新挂载组件时都会执行useEffect。根据您的代码，这可能会在许多不同的场景中发生。因此，useEffect 每次都以新数据开始并关闭。

所以我们只需要将我们的值保存到 ref 中，这样我们就可以在每个 re-render.

中使用相同的引用

// 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]);

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

How to update state using setInterval on functional components in React

reactjs

react-hooks

timer

setinterval