Question

class Game extends React.Component{

        constructor() {
            super();
            this.state = {
                history: [{
                    squares: Array(9).fill(null)
                }],
                xIsNext: true,
                stepNumber : 0,
                xScore : 0,
                oScore : 0,
            };
        }

        updateScore(winner){
            if(winner == 'X'){
                this.setState({
                    xScore : this.state.xScore + 1
                });
            }else if(winner == 'O'){
                console.log(this.state.oScore);
            }
        }

        render(){
            const history = this.state.history;
            const current = history[this.state.stepNumber];
            const winner = calculateWinner(current.squares);

            const moves = history.map((step, move) => {
                const desc = move ? 'Move #' + move : 'Game start';

                return (
                        <li>
                            <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
                        </li>
                );
            });

            let status;
            if (winner) {
                status = 'Winner : ' + winner;
                this.updateScore(winner);
            } else {
                status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
            }

            return(
                <div className="game">
                    <div className="game-board">
                        <Board squares={current.squares}
                               onClick={(i) => this.handleClick(i)}
                        />
                    </div>
                    <div className="game-info">
                        <div>{status}</div>
                        <ol>{moves}</ol>
                    </div>
                    <div className="score-board">
                        Score Board
                        <div className="xScore">
                            X : {this.state.xScore}
                        </div>
                        <div className="oScore">
                            O : {this.state.oScore}
                        </div>
                    </div>
                </div>
            );

Click here了解整个演示代码和应用程序。这是我正在进行的第一个教程。我希望添加一些自己的功能。我想在这个游戏中添加一个记分板。但我无法更新分数。

我很困惑为什么我会出现堆栈溢出。这个问题可能看似多余，但另一个answers由于某种原因不能帮助我。请稍微说清楚。

记分牌的

Live Demo给出了垃圾值。 X需要赢得重现错误。

解决方案是什么？

ReactJS中的最大调用堆栈超出错误

0 个答案: