javascript - 如何在 react 中使用 setInterval？

Question

我正在尝试为打字游戏制作一个简单的 setInterval 函数，但它会根据我的语法不断出现故障，或者像现在这样根本没有更新。

如何让它每秒更新一次并调用 if 语句中的函数？

const [counter, setCounter] = useState(10);

useEffect(() => {
  let timer = setInterval(() => {
    setCounter(counter - 1);

    if (counter === 0) {
      setWordIndex(wordIndex + 1);
      setLives(lives - 1);
      life.play();
      setCounter(10);
    }
  }, 1000);
}, []);

*********编辑***************

这就是我现在正在工作的东西。第一个答案解决了计数器不递减的异步问题，但我不得不将 if 语句移到 useEffect 之外，以纠正我认为是由同样的问题引起的。

 useEffect(() => {
    let timer = setInterval(() => {
      setCounter( counter => counter - 1);
    }, 1000);
  }, []);
  if (counter == 0) {
    setWordIndex(wordIndex + 1);
    setLives(lives - 1);
    life.play();
    setCounter(10);
  }

Answer 1

在 setCounter 中使用回调函数功能。当您在异步函数中调用状态更新时。根据之前的状态更新状态是一种很好的做法。

const [counter, setCounter] = useState(10);
useEffect(() => {
    let timer = setInterval(() => {
        setCounter(counter => {
            const updatedCounter = counter - 1;
            if (updatedCounter === 0) {
                setWordIndex(wordIndex + 1);
                setLives(lives - 1);
                life.play();
                return 10;
            }
            return updatedCounter;
        }); // use callback function to set the state

    }, 1000);
    return () => clearInterval(timer); // cleanup the timer
}, []);