Javascript 如何在react中按1计数并每5秒设置一次状态

我有一个useState变量，我希望每5秒更新一次，增量为1，但我希望它停止计数，并在达到数组长度后再次从0开始。这是我到目前为止所拥有的。现在控制台日志令人困惑，它开始工作，然后数字开始每秒或更快地输出。当我不在增量函数中运行SetShowNum时，这是可行的，但这是我需要的功能

任何帮助都将不胜感激。谢谢

const [showNum, SetShowNum] = useState(0)

  useEffect(() => {
    var i = 0

    var interval = setInterval(increment, 5000)

    var stop = data.allSanityProducts.edges.length // right now equates to 4

    function increment() {
      i = i + 1

      if (i === stop) {
        i = 0
      }

      console.log(i)
      SetShowNum(i)
    }
  })

---

在这个解决方案中，我添加了一个依赖项数组作为useEffect的第二个参数。这确保useEffect仅在组件首次装载时运行。否则，编写时的useEffect将在每次重新渲染时继续运行，因此您会看到内存泄漏和所有日志语句。我在useEffect中加入了日志语句来观察这种行为。我建议在有依赖项数组和没有依赖项数组的情况下运行代码，以观察重新呈现的情况

React文件：

“如果要运行一个效果并只清理一次（装载和卸载时），可以传递一个空数组（[]）”作为第二个参数。这告诉React，您的效果不依赖于道具或状态的任何值，因此它永远不需要重新运行。这不是作为特殊情况处理的-它直接遵循依赖项数组的工作方式。”

链接到React useEffect文档：

链接到代码沙盒：

---

这是否回答了您的问题。这里有一些钩子的例子。你还必须在useeffect cleanup中有一个clearInterval。我在cleanup中读到了clearInterval，但不确定如何根据react文档来实现它

const Component = () => {
  console.log("rerender");

  const [showNum, SetShowNum] = useState(0);
  
  useEffect(() => {
    console.log("running useEffect");
    var i = 0;

var interval = setInterval(increment, 5000);

// var stop = data.allSanityProducts.edges.length // right now equates to 4
const stop = 4;

function increment() {
  i = i + 1;

  if (i === stop) {
    i = 0;
  }

  console.log(i);
  SetShowNum(i);
}
  }, []);

  return (...)
};