Question

我有一个Container组件，用于管理其状态的Game组件的gameId。在游戏结束时，用户获得分数。用户点击playAgain，我希望通过添加userScore来保持总分数的总计。

更新

要更改顶部组件Container中的状态，我需要在函数中绑定它并将其发送到Footer。在我尝试调用此函数并出现错误之前＆＃34;不要在render（）＆＃34;

中更改状态

  this.props.addToTotalScore(this.props.userScore);

代码：

class Container extends React.Component {    

 constructor(props) {
 super(props);
 this.state = { 
   gameId:1,
    ...
   totalScore:0
 };
}

  addToTotalScore(val){
      this.setState({ totalScore: this.state.totalScore + val }); 
  }
 .....
 render(){
    return (
        <div>
            <Game 
                key={this.state.gameId}
                ...

                addToTotalScore={this.addToTotalScore.bind(this)}
            />
        </div>
    ); 
 }
}

游戏：

class Game extends React.Component {

  ....

    finishGame(gameState) {

    let completedTime = this.secondsRemaining;
    let userScore = 0;
    if (gameState === "won"){

        let wrongGuesses = 3 - this.state.wrongGuesses.length;
        userScore = wrongGuesses < 1? 1: wrongGuesses;


    }
    // want to change the userScore and update the totalScore here
    this.setState({ userScore: userScore });
    this.props.addToTotalScore(this.props.userScore);
   });

    clearInterval(this.playTimerId);
    return gameState;
  }

我要解决的问题是创建一个变量并设置Game状态，然后使用相同的变量而不是调用props.userState来更新总数。这按预期更新了总计数。

在finishGame中：

 ...
 let wrongGuesses = 3 - this.state.wrongGuesses.length;

 let _userScore = wrongGuesses < 1? 1: wrongGuesses;
 this.setState({userScore: _userScore});
 this.props.addToTotalScore(_userScore);

Answer 1

我认为这实际上并不是关于React的问题，而是关于你的游戏。您要问的是：何时是将分数添加到总分中的最佳时间。

最简单的答案是：一旦游戏结束。显然这取决于你的游戏。你如何确定该轮已完成？它是基于计时器？或基于特定事件？

如果你的finishGame方法在游戏回合结束时运行，那么是的，它是一个增加总分的好地方。我不明白为什么这会影响render。我不明白你的意思 Adding this bound function and calling it here is a problem bc of setting state within a render().您在render（）方法中将它作为prop传递，这与调用它不同。一旦调用，状态将改变，React将再次运行render（）。

React：如何在游戏中保持总计

1 个答案: