Ich habe eine Container-Komponente, die gameId für eine Spielkomponente in seinem Zustand verwaltet. Am Ende des Spiels erhält der Benutzer eine Punktzahl. Der Benutzer trifft auf playAgain und möchte eine laufende Summe von totalScore behalten, indem er userScore hinzufügt.Reagieren: Wie man eine laufende Summe in einem Spiel hält
aktualisiert
Um den Zustand in der oberen Komponente Container zu ändern, muss ich dies in einer Funktion binden, und senden Sie es an Footer unten. Bevor ich versuchte, diese Funktion aufzurufen und bekam eine Fehlermeldung "nicht den Zustand ändern innerhalb eines render()"
this.props.addToTotalScore(this.props.userScore);
Der Code:
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>
);
}
}
Und Spiel:
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;
}
Was ich getan habe, um dies zu lösen, war eine Variable zu erstellen und den Game-Status zu setzen und dann die selbe Variable zu verwenden, anstatt props.userState aufzurufen, um die Summe zu aktualisieren. Dies aktualisiert die Gesamtzahl wie erwartet.
In finishGame:
...
let wrongGuesses = 3 - this.state.wrongGuesses.length;
let _userScore = wrongGuesses < 1? 1: wrongGuesses;
this.setState({userScore: _userScore});
this.props.addToTotalScore(_userScore);
Könnten Sie näher erläutern, was Sie meinen, indem Sie hier ein Problem bc des Festlegens von Status innerhalb einer render() aufrufen? Weil ich nicht sehe, wo Sie innerhalb des Status in render-Methode aktualisieren –
Nicht wirklich sicher, was Ihr Problem ist, aber wenn Sie meinen, dass Sie Ihren Zustand irgendwo in Ihrer Rendermethode setzen, dann sollten Sie das nicht tun – Jayce444