为什么我的游戏本不应该结束？

Question

当比赛是我的Tic TAC Toe游戏中的平局时，我正在使用redux进行处理。如果董事会成员已满，并且未确定获胜者，则该比赛应视为平局。但是到目前为止，即使有3个X和3个O，这场比赛也被称为平局。

我认为问题出在我基于console的减速器上。

我正在尝试检查if(this.props.totalMovesValueRedux(9)) {return "draw";}。换句话说，如果木板满了，它应该返回draw。

如果您查看console的输出，则[totalMovesReducer]从4跳到9，结束游戏，并宣布比赛为平局，情况并非如此。

我尝试过

• if(this.props.totalMovesValue == 9) {return "draw"}，但是当我这样做并且电路板装满时，我的浏览器崩溃，导致必须手动关闭然后重新打开笔记本电脑。

我在做什么错？

这里是Board.js：

import React, { Component } from 'react';
import './Board.css';
import { connect } from 'react-redux';
import * as actionTypes from '../../store/actions/actions';

class Board extends Component {
    constructor(props) {
        super(props);
        this.state = {
            turn: 'X',
            board: Array(9).fill(''),
            locked: false
        }
    }

    clicked(box) {
        if(this.props.gameEndedValue || this.state.locked) { // this.props.gameLockedValue
            return;
        }

        if(this.state.board[box.dataset.square] === '') {               
          this.state.board[box.dataset.square] = this.state.turn;
          box.innerText = this.state.turn;

          this.state.turn = this.state.turn === 'X' ? 'O' : 'X';
          this.props.totalMovesValueRedux(this.props.totalMovesValue);
        }

        let result = this.checkWinner();

        switch(result) {
            case 'X':
                this.props.gameEndedValueRedux(true);
                this.props.winnerValueRedux("X wins!");
                break;
            case 'O':
                this.props.gameEndedValueRedux(true);
                this.props.winnerValueRedux("O wins!");
                break;
            case 'draw':
                this.props.gameEndedValueRedux(true);
                this.props.winnerValueRedux("Match is a draw");
                break;
            default:
                break;
        }

        if(this.state.turn === 'O' && !this.props.gameEndedValue) {
           this.props.gameLockedValueRedux(true);
            setTimeout(() => {
                do {
                    var random = Math.floor(Math.random() * 9);
                } while(this.state.board[random] !== '');

                this.props.gameLockedValueRedux(false);
                this.clicked(document.querySelectorAll('.square')[random]);
            }, 1000)
        }
    }

    checkWinner() {
        let moves = [[0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], [0, 1, 2], [3, 4, 5], [6, 7, 8]];
        let board = this.state.board;

        for(let i = 0; i < moves.length; i++) {
            if(board[moves[i][0]] === board[moves[i][1]] && board[moves[i][1]] === board[moves[i][2]]) {
                return board[moves[i][0]];
            }
        }
// the problem is here
        console.log("this.props.totalMovesValue ==> " + this.props.totalMovesValue);
        if(this.props.totalMovesValueRedux(9)) {
            return "draw";
        }
   // the problem ends here
    }

    render() {
        return(
            <div id="game">
                <div id="state">{this.props.winnerValue}</div>

                <div id="head">
                    Tic Tac Toe
                </div>

                <div id="board" onClick={(e) => this.clicked(e.target)}>
                    <div className="square" data-square="0"></div>
                    <div className="square" data-square="1"></div>
                    <div className="square" data-square="2"></div>
                    <div className="square" data-square="3"></div>
                    <div className="square" data-square="4"></div>
                    <div className="square" data-square="5"></div>
                    <div className="square" data-square="6"></div>
                    <div className="square" data-square="7"></div>
                    <div className="square" data-square="8"></div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        winnerValue: state.winnerValue.winnerValue,
        gameLockedValue: state.gameLockedValue.gameLockedValue,
        gameEndedValue: state.gameEndedValue.gameEndedValue,
        totalMovesValue: state.totalMovesValue.totalMovesValue

    };
};

const mapDispatchToProps = dispatch => {
    return {
        winnerValueRedux: (value) => dispatch({type: actionTypes.WINNER_VALUE, value}),
        gameLockedValueRedux: (value) => dispatch({type: actionTypes.GAME_LOCKED_VALUE, value}),
        gameEndedValueRedux: (value) => dispatch({type: actionTypes.GAME_ENDED_VALUE, value}),
        totalMovesValueRedux: (value) => dispatch({type: actionTypes.TOTAL_MOVES_VALUE, value})
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Board);

这里是totalMovesReducer

import * as actionTypes from '../actions/actions';

const initialState = {
    totalMovesValue: 0
};

const totalMovesReducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.TOTAL_MOVES_VALUE:
            console.log("[totalMovesReducer] ==> " + action.value);
            return {
                ...state,
                totalMovesValue: state.totalMovesValue + 1
            };

        default:
            return state;

    }
};

export default totalMovesReducer;

在console中的输出：

[totalMovesReducer] ==> 0
[gameLockedReducer] ==> true
[gameLockedReducer] ==> false
[totalMovesReducer] ==> 1
[totalMovesReducer] ==> 2
[gameLockedReducer] ==> true
[gameLockedReducer] ==> false
[totalMovesReducer] ==> 3
[totalMovesReducer] ==> 4
this.props.totalMovesValue ==> 4
[totalMovesReducer] ==> 9
[gameEndedReducer] ==> true
[winnerReducer] => Match is a draw
[gameLockedReducer] ==> true
[gameLockedReducer] ==> false