React学习笔记--Tic Tac Toe例程填坑

Posted 2020-10-23 tom-lau

React学习笔记

三 Tic Tac Toe例程填坑

  React开发环境搭建好后，就是对React本身进行学习了，React官方的Tic Tac Toe是一个不错的练手样例。本人按照官方样例一步一步的进行开发，前面进行的都还算顺利，可是当进行到Implementing Time Travel章节后，发现按照样例实现的代码存在问题。
  主要表现为以下问题：

• 返回历史步骤后，步骤列表没有减少；
• 返回历史步骤后，继续下棋的过程中棋盘会将历史步骤中的棋子再次渲染出来；
• 多次返回历史步骤后，点击棋盘没有反应；

  通过研究源程序我发现问题出在了jumpTo函数上。原来的函数如下，每次跳转到历史步骤时，没有对state中的history数组进行修正，导致后续的操作产生了混乱。

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

  经过修正后，jumpTop函数如下，上述问题既不会产生了。

jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext: (step % 2) === 0,
            history: this.state.history.slice(0, step + 1),
        });
}

  可能本人的程序是其他地方有问题，导致按照例程开发出来的游戏没有预期的表现，请园友多多指正。