Javascript ReactJS中出现超过最大调用堆栈错误 类游戏扩展React.Component{ 构造函数（）{ 超级（）； 此.state={ 历史：[{ 正方形：数组（9）。填充（空） }], 下一个：是的， 步骤编号：0， xScore:0， oScore:0， }; } updateScore（优胜者）{ 如果（获胜者='X'）{ 这是我的国家({ xScore:this.state.xScore+1 }); }否则如果（获胜者='O'）{ console.log（this.state.oScore）； } } render（）{ const history=this.state.history； const current=history[this.state.stepNumber]； const winner=calculateWinner（当前平方）； 常量移动=历史。映射（（步骤，移动）=>{ const desc=移动？“移动”+移动：“游戏开始”； 返回( ); }); 让状态； 国际单项体育联合会（优胜者）{ 状态='获胜者：'+获胜者； 此.updateScore（获胜者）； }否则{ 状态='Next player:'+（this.state.xIsNext？'X'：'O'）； } 返回( 这个.handleClick（i）} /> {状态} {moves} 记分牌 X:{this.state.xScore} O:{this.state.oScore} );

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

我很困惑，为什么会出现堆栈溢出。 这个问题可能显得多余，但另一个问题由于某种原因帮不了我。请给我一些启发

记分板上给出一个垃圾值的错误。X需要赢才能重现错误

---

解决方案是什么？

其他答案

哪些其他答案-搜索“堆栈溢出”堆栈溢出一定很难！！！

render

调用

updateScore

哪个调用

setState

哪个调用

render

。@cartant我应该为记分板制作另一个组件吗？谢谢。不管你决定做什么，我认为重要的是不要在

render

中改变状态。代码出现了若要缺少一些函数，包括

handleClick

。请将winner计算逻辑移入其中，您的问题就会得到解决。

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