如何在反应中每 5 秒加 1 和 setState

Posted 2023-02-22

【中文标题】如何在反应中每 5 秒加 1 和 setState

【英文标题】：How to count up by 1 and setState every 5 seconds in react

【发布时间】：2020-12-14 17:16:31

【问题描述】：

我有一个 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)
    
  )

【问题讨论】：

这能回答你的问题吗？ setInterval in a React app。有一些钩子示例。

你还得在useEffect清理中有一个clearInterval

我正在阅读有关 clearinterval 在清理中的信息，但不确定如何根据反应文档完成该操作

【参考方案1】：

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

React 文档：

“如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数。这告诉 React 你的效果不依赖于来自 props 或 state 的任何值，因此它永远不需要重新运行。这不作为特殊情况处理 - 它直接遵循依赖项数组始终如何工作。”

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 (...)
;

React useEffect 文档的链接： https://reactjs.org/docs/hooks-effect.html

链接到代码框： https://codesandbox.io/s/nameless-sunset-1qyq4?file=/src/SO.js:0-590