如何在useEffect中停止无限循环？

Posted 2023-03-16

【中文标题】如何在useEffect中停止无限循环？

【英文标题】：How to stop infinity loop inside useEffect?

【发布时间】：2021-12-05 06:00:22

【问题描述】：

我需要将类组件转换为功能组件， 当我转换它时，它给了我一个无限循环。我怎样才能停止这个循环？

类组件ComponentDidMount代码

componentDidMount() 
  setInterval(this.moveSnake, this.state.speed);
  document.onkeydown = this.onKeyDown;

我为上面的 ComponentDidMount 编写的功能组件

useEffect(()=>
  document.onkeydown = onKeyDown
  const interval = setInterval(() => 
    moveSnake()
   , 200);
   return () => clearInterval(interval);
,[]);



const moveSnake = ()=>
  let dots = [...snake];
  let head = dots[dots.length-1];

  switch(direction)
    case "RIGHT":
      head = [head[0]+2, head[1]];
      break;
    case "LEFT":
      head = [head[0]-2, head[1]];
      break;
    case "UP":
      head = [head[0], head[1]-2];
      break;
    case "DOWN":
      head = [head[0], head[1]+2];
      break;
  

  dots.push(head);
  dots.shift();

  setSnake(dots);
  console.log(dots);

【问题讨论】：

请分享你在setInterval中运行的函数的代码

@SinanYaman 当然我会更新它

您的代码对我来说似乎很好。你能创建一个codesandbox 复制这个bug，它会更容易修复。现在这个问题对我来说并不明显。

【参考方案1】：

在useEffect 中返回后，您有一条永远不会运行的行：

document.onkeydown = onKeyDown;

【讨论】：

我把它改成了函数的顶部。它现在运行。

这不是答案，而是评论。

我同意@SinanYaman，但我不会写 cmets。

哦，我明白了。不记得那个限制了。