问题描述
我正在尝试创建一个游戏，当用户的得分达到5分时会弹出一个模式。当用户错误地回答问题时，将显示答案反馈。我正在使用甜蜜警报来提供答案反馈。
我想要实现的是，单击“查看最终分数”按钮后，我希望用户重定向到页面上方的游戏，在该页面上将显示最终分数。
我一般对反应/编程都是新手，但我尝试了许多无济于事的选项。当前使用的方法给我：
因此，任何帮助或指导将不胜感激：）
export class QuestionModal extends Component {
constructor(props) {
super(props);
this.state ={
questions: {},answerOptions: [],chosenAnswer: '',isAnswerCorrect: false,value: '',answer: '',gameOver: false,gamescore: this.props.context.gamescore,};
this.handleChange = this.handleChange.bind(this);
this.gameOver = this.gameOver.bind(this);
}
// Axios call to get questions from database
componentDidMount() {
axios.get('/hacker')
.then((response) => {
console.log([response.data]);
const result = response.data;
this.setState({
questions: result,answerOptions: result.answerOptions,answer: result.answer,explanation: result.explanation,}); console.log(this.state.answer);
}).catch((error) => {
this.setState({isLoaded: true,error});
});
}
/* This function is invoked when the user hits submit after answering the question. It does 2 things:
1. Compares the answer provided by the user vs the answer in the db. Sweetalert is then used to pop up and show the correct/wrong answer.
2. Invokes the onHide function to hide the question modal
*/
checkAnswer() {
console.log(this.state.gamescore);
if (this.state.answerOptions[this.state.answer] === this.state.value) {
console.log('correct');
swal("Nice one!",this.state.explanation,"success",{
cloSEOnClickOutside: false,buttons: {
confirm: "Back to the game!"
}
});
} else {
console.log('incorrect');
swal("So close!","error",{
cloSEOnClickOutside: false,buttons: {
confirm: "View your final score!"
},}).then (function() {
// window.location.href = "./gameover";
this.gameOver();
});
}
this.props.onHide();
}
gameOver() {
console.log (this.state.gamescore)
this.props.history.push({
pathname: `/gameover`,gamescore: this.state.gamescore,});
}
handleChange(event) {
console.log('value is ' + event.target.value);
this.setState({
value: event.target.value,});
}
render() {
return (
<Modal
{...this.props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
backdrop="static"
keyboard={false}
>
<Modal.Header>
<Modal.Title className="hackerGameModal"> Answer the question below correctly to continue with the game!</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="hackerGameQuestion">
<h4>{this.state.questions.question}</h4>
<form>
<FormControl component="fieldset" >
<RadioGroup aria-label="quiz" name="hackerGameAnswers" onChange={this.handleChange} value={this.state.value}>
{this.state.answerOptions.map((option) => {
return (
< FormControlLabel key={option} value={option} control={<Radio color="primary"/>} label={option}/>
);
})}
</RadioGroup>
</FormControl>
</form>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="contained" type="submit" color="primary" onClick={this.checkAnswer.bind(this)}>Submit</Button>
</Modal.Footer>
</Modal>
);
}
}
export default withRouter(QuestionModal);
编辑：checkAnswer（）函数中的console.log（this.state.gamescore）显示当前分数。该错误发生在第83行，其中：
.then (function() {
this.gameOver() //this is line 83
gameOver() {
console.log (this.state.gamescore)
this.props.history.push({
pathname: `/gameover`,});
}
Hacker.js（主要游戏文件，一些功能已删除，因为我认为它与问题无关）
class Hacker extends Component {
constructor(props,context) {
super(props,context);
this.state = {
display: 'none',gameStarted: false,hackerHasBeenHit: false,showChallengeQuestion: false,gamescore: 0,buttondisplay: 'none',showQuizModal: false,};
}
/* This function is invoked when the user clicks the start button,the interval sets the speed to which the hacker appears */
startGame() {
if (this.state.gameStarted) {
return;
}
this.setState({
gameStarted: true,display: 'block',});
setInterval(() => {
this.showHackers();
},1000);
}
/* This function does 2 things:
1. When the user clicks on the "hacker",the image will change to the shield for a certain period of time
2. Add point to score
*/
countscore(e) {
const target = e.target;
target.parentNode.classList.add('gameShield');
this.setState({
hackerHasBeenHit: true,gamescore: this.state.gamescore + 1,});
window.setTimeout(function() {
target.parentNode.classList.remove('gameShield');
},1000); // This sets the time which the shield is displayed for
this.challengeQuestion();
}
/* This function shows the challenge question every 5 times
+1 is added to challengescore as gamescore starts from 0. Ensures question does not pop up at 0,6,11,etc
*/
challengeQuestion() {
const challengescore = this.state.gamescore + 1;
if (challengescore % 5 === 0) {
this.setState({
showChallengeQuestion: true,showQuizModal: true,});
this.props.history.push({
gamescore: this.state.gamescore,})
};
}
render() {
const addModalClose = () =>
this.setState({
showQuizModal: false,});
return (
<section>
<WebHeader/>
<div className="hackerGameContainer">
<div className="gameStartButton">
<Button variant="contained" color="primary"type="button" onClick={ this.startGame.bind(this) }> Start Game </Button>
</div>
<div className="hackerGame">
<Gamescore score={this.state.gamescore} display={this.state.display} />
{ this.createFirewalls() }
<QuestionModal show={this.state.showQuizModal} onHide={addModalClose} context={this.state} score={this.state.gamescore} />
</div>
</div>
</section>
);
}
}
export default Hacker;
谢谢！
解决方法
this并没有绑定到gameOver回调，因此最终成为了承诺链中的undefined。
在构造函数中将this绑定到gameOver
constructor(props) {
super(props);
this.state ={
...
};
this.handleChange = this.handleChange.bind(this);
this.gameOver = this.gameOver.bind(this);
}
或将gameOver转换为箭头函数，该函数将自动绑定调用者的this
gameOver = () => {
this.props.history.push({
pathname: `/gameover`,gameScore: this.state.gameScore,});
};
checkAnswer是同步的，因此在排队状态更新之后 似乎正在排队。 this.props.onHide在父组件中将addModalClose设置为false，并关闭/卸载模态。尝试调整gameOver的签名，以获取路由状态有效载荷，以在checkAnswer排队到调用堆栈之前封装来自onHide的组件状态的副本。
gameOver = (gameScore) => {
this.props.history.push({
pathname: `/gameover`,gameScore,});
};
传递状态值
} else {
console.log('incorrect');
swal("So close!",this.state.explanation,"error",{
closeOnClickOutside: false,buttons: {
confirm: "View your final score!"
},}).then (function() {
this.gameOver(this.state.gameScore); // <-- pass value
});
}
this.props.onHide();
注意：看来swal控制着一些确认，并且this.props.onHide是在.then调用的swal块之后触发的。