Перевернутая карта не совпадает с перевернутой картой - PullRequest
Новая
       25

Перевернутая карта не совпадает с перевернутой картой

0 голосов
/ 16 апреля 2020

Я следую инструкциям React (https://reactjs.org/tutorial/tutorial.html) и обнаружил, что перевернутая карта - это не то же самое, что перевернутая карта.

Изменить строки 87-96 из https://codepen.io/gaearon/pen/gWWZgR (в моих фрагментах изменены только строки 87 и 96)

Чтобы понять, что я имею в виду, щелкните внутри доски пальцев ног ti c ta c и посмотрите на список ходов. Первые 2 фрагмента кода дают: 

1. Go to game start
2. Go to move #1
3. Go to move #2
4. Go to move #3
...

, но последний фрагмент дает (желательно) 

1. Go to move #3
2. Go to move #2
3. Go to move #1
4. Go to game start
...

Оригинал (список перемещения в порядке возрастания) 

const moves = history.map((step, move) => {
  const desc = move ?
    'Go to move #' + move :
    'Go to game start';
  return (
    <li key={move}>
      <button onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );
});

Обратное отображение и отображение (перемещение списка в порядке возрастания) 

const moves = history.slice(0).reverse().map((step, move) => {
  const desc = move ?
    'Go to move #' + move :
    'Go to game start';
  return (
    <li key={move}>
      <button onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );
});

Отображение и обратное отображение (перемещение списка в порядке убывания) 

const moves = history.map((step, move) => {
  const desc = move ?
    'Go to move #' + move :
    'Go to game start';
  return (
    <li key={move}>
      <button onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );
}).slice(0).reverse();

Почему два последних фрагмента кода дают разные результаты?

history - это массив состояний игры: 

let history = [
    {
        squares: [
            null, null, null,
            null, null, null,
            null, null, null,
        ],
    },
    {
        squares: [
            null, null, null,
            null, 'X', null,
            null, null, null,
        ],
    },
    {
        squares: [
            null, null, null,
            null, 'X', null,
            null, null, 'O',
        ],
    },
]

В приведенном выше примере игрок «X» выбирает центральную ячейку, а затем игрок «O» выбирает нижнюю правую ячейку.

...