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

  可能本人的程序是其他地方有問題，導致按照例程開發出來的遊戲沒有預期的表現，請園友多多指正。

React學習筆記--Tic Tac Toe例程填坑