使用 useEffect Hook 在 react.js 中更新自动递增计数器值时遇到问题

Question

我遇到了自动递增计数器的问题，它每 2 秒更新一次。 它更新了价值，但以一种小故障的方式请检查代码并分享您对问题的看法。

 const [counter, setCounter] = useState(1200)
 function handleCounter() {
    setCounter(counter + 1)
}
useEffect(() => {
    if (counter => 1200 && counter < 1364) {
        setInterval(handleCounter, 2000);
    }else {
        clearInterval(setInterval(handleCounter, 2000))
    }
    clearInterval(setInterval(handleCounter, 2000))
}, [counter])

Answer 1

尝试这个

useEffect(() => {
    const timeInterval = setInterval(() => {
      counter < 1364 && setCounter((prevCount) => prevCount + 1);
    }, 2000);

    return () => {
      clearInterval(timeInterval);
    };
  }, [counter]);

Answer 2

下面的代码将每 2 秒执行一次 handleCounter function。 这是你想要做的吗？

  useEffect(() => {
    const intervalID = setInterval(() => handleCounter(), 2000);
    return () => {
      clearInterval(intervalID);
    }
  },[]);