React：ゲーム中の合計を維持する方法

Question

GameコンポーネントのgameIdをその状態で管理するコンテナコンポーネントがあります。 ゲームの最後に、ユーザーはスコアを取得します。 ユーザーはplayAgainをヒットし、totalScoreを合計するにはuserScoreを追加します。トップコンポーネントのコンテナの状態を変更するには

を更新

、私は機能でこれを結合して、フッターにそれを送信する必要があります。 私は、この関数を呼び出すと、エラーが

​​

コード "のrender（）内の状態を変更しない" しまっしようとしていた前に：

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

私がこれを解決するためにしたのは、変数を作成してゲームの状態を設定し、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

私は、これは実際にリアクトについての質問ではないと信じて、それはあなたのゲームについてです。あなたが求めているのは、スコアが合計スコアに加算される最も良い時期はいつですか。

最も簡単な答えは、ゲームラウンドが終了した後です。明らかにこれはあなたのゲームに依存します。ラウンドが終了したとあなたはどのように決定しますか？それはタイマーに基づいていますか？または特定のイベントに基づいていますか？

ゲームラウンド終了時にfinishGameメソッドが実行されている場合は、合計スコアに加算するのに適しています。なぜこれがrenderに影響するのかわかりません。 Adding this bound function and calling it here is a problem bc of setting state within a render(). render（）メソッド内で小道具として渡していますが、これはそれを呼び出すのと同じではありません。呼び出されると状態が変わり、Reactはrender（）を再び実行します。