Javascript ً；如何将stepNumber变量设置为低于history.length的值？（丹·阿布拉莫夫创作的Tic-Tac-Toe）

我试图理解Dan Abramov写的代码，但我不明白在单击“Go to Move#n”按钮，然后单击棋盘的一个正方形后，代码如何知道正确的步数

// handleClick function:

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

如果我单击一个正方形，此函数将工作，并再次将

stepNumber

变量设置为

history.length

这是单击“转到移动#n”按钮时调用的函数，它将

stepNumber

设置为按钮的索引

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

---

现在，这一部分令人困惑，当转到游戏中的前一步时，

stepNumber

可以是例如1，然后如果我单击一个正方形，它应该将

stepNumber

设置为例如6（历史数组的当前长度），这将恢复其相应正方形中所有先前的'X'和'O'值，但事实并非如此。知道为什么吗？

我想这个逻辑的关键部分是handleClick函数的第一行：

 const history = this.state.history.slice(0, this.state.stepNumber + 1);

如果您在单击“转到移动#3”后将stepNumber设置为3，然后单击电路板上的空白方块，则只有部分历史记录，直到stepNumber被复制，其余部分被丢弃

你可以在上面阅读