ReactJs.функция вызывается до обновления состояния

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

Вы обновляете только состояние направления. Это делает компонент повторно визуализировать. Затем вы обновляете состояние змеи, и компонент снова выполняет рендеринг, а затем происходит обновление головы.

Решением может быть нарушение функции 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
   });
};

Answer 2

Вы можете использовать это.

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

Вызовите вашу функцию в обратном вызове setState, она будет вызвана после обновления состояния.

ссылка: https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296