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

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
   });
};