Question

我正在编写Snake游戏应用进行练习。

我有一个changeDirection函数，可以根据箭头的点击将相应的方向设置为状态：

changeDirection = event => {
  const { direction } = this.state;

  const keyPressed = event.keyCode;

  if (keyPressed === keyCodes.LEFT_KEY && direction !== "right") {
    this.setState({ direction: "left" });
  }
  if (keyPressed === keyCodes.UP_KEY && direction !== "down") {
    this.setState({ direction: "up" });
  }
  if (keyPressed === keyCodes.RIGHT_KEY && direction !== "left") {
    this.setState({ direction: "right" });
  }
  if (keyPressed === keyCodes.DOWN_KEY && direction !== "up") {
    this.setState({ direction: "down" });
  }
}

，它工作正常，但是问题出在另一个函数中。我正在根据方向状态更新蛇的头部位置。并且此函数每1秒钟执行一次（使用setInterval），并且当方向改变时，蛇的头部不会立即改变其方向。下一步就可以做到。

我知道这是因为蛇第一次移动时尚未设置新的方向状态，但是我不知道该如何解决。

这是仓库： https://github.com/Dito-Orkodashvili/snake

Answer 1

您可以使用它。

   this.setState({ direction: "down" },anotherFunction());

在setState的回调中调用函数，状态更新后将调用它。

链接：https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

Answer 2

您仅在更新方向状态。这使组件重新呈现。然后，您更新蛇的状态，并再次重新渲染组件，然后当您看到头部更新时。

一个解决方案可能是破坏moveSnake函数。组件渲染后，仅使用moveSnake即可移动蛇。

创建另一个函数来更新头和蛇的状态，并从键盘事件处理程序中调用它。这样，组件将同时使用状态中的所有更改重新渲染。

从setInterval更新状态也应该起作用，就像这样：

newDirection;

startGame = () => {
   this.interval = setInterval(() => {
     this.moveSnake();
   }, 200);
};

changeDirection = event => {
    const keyPressed = event.keyCode;

    if (keyPressed === keyCodes.LEFT_KEY && direction !== 'right') {
      this.newDirection = 'left';
    }
    if (keyPressed === keyCodes.UP_KEY && direction !== 'down') {
      this.newDirection = 'up';
    }
    if (keyPressed === keyCodes.RIGHT_KEY && direction !== 'left') {
      this.newDirection = 'right';
    }
    if (keyPressed === keyCodes.DOWN_KEY && direction !== 'up') {
      this.newDirection = 'down';
    }
};

moveSnake = () => {
   /* do updates in the snake shape */

   this.setState({
     direction: this.newDirection,
     snake: copyOfSnake
   });
};

ReactJs。在状态更新之前调用该函数

2 个答案: