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

Question

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

类组件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);
}

Answer 1

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

document.onkeydown = onKeyDown;