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

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

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