Javascript 正在通过状态。然后是函数和甜警报

我正在尝试创建一个游戏，当用户的分数达到5分时，会弹出一个模式。当用户错误地回答问题时，将显示回答反馈。我使用sweet alert提供答案反馈

我想要实现的是，在点击“查看最终分数”按钮时，我希望用户被重定向到一个游戏页面，在该页面上显示最终分数

一般来说，我对反应/编程非常陌生，我尝试了很多选择，但都没有成功。目前使用的方法给了我：

因此，任何帮助或指导都将不胜感激：）

但是当调用gameOver（）函数时，会出现未定义的错误

   gameOver() {
    console.log (this.state.gameScore)
    this.props.history.push({
        pathname: `/gameover`,
        gameScore: this.state.gameScore,
    });
  }

Hacker.js（主游戏文件，一些功能被删除，因为我认为这与问题无关）

类黑客扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
显示：“无”，
游戏开始：错，
hackerHasBeenHit:错，
showChallengeQuestion:错误，
游戏分数：0，
按钮显示：“无”，
showQuizModal:false，
};
}
/*当用户单击开始按钮时调用此函数，间隔设置黑客出现的速度*/
startGame（）{
if（this.state.gameStarted）{
返回；
}
这是我的国家({
没错，
显示：“块”，
});
设置间隔（（）=>{
这个；
}, 1000);
}
/*此函数有两个功能：
1.当用户点击“黑客”时，图像会在一段时间内变为屏蔽
2.加分得分
*/
计数分数（e）{
const target=e.target；
target.parentNode.classList.add（'gameShield'）；
这是我的国家({
哈克拉斯宾希特：没错，
gameScore:this.state.gameScore+1，
});
setTimeout（函数（）{
target.parentNode.classList.remove（'gameShield'）；
}，1000）；//这设置屏蔽显示的时间
这个。challengeQuestion（）；
}
/*此功能每5次显示一次挑战问题
+当游戏分数从0开始时，1被添加到challengeScore。确保问题不会在0、6、11等处弹出
*/
挑战者{
const challengeScore=this.state.gameScore+1；
如果（挑战核心%5==0）{
这是我的国家({
showChallengeQuestion：没错，
showQuizModal：没错，
});
这个。道具。历史。推({
gameScore:this.state.gameScore，
})
};
}
render（）{
常量addModalClose=（）=>
这是我的国家({
showQuizModal:false，
});
返回(
开始比赛
{this.createFirewalls（）}
);
}
}
导出默认黑客；

---

提前谢谢

此

未绑定到

gameOver

回调，因此它最终在承诺链中处于

未定义的状态

将
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并关闭/卸载模态。在将
onHide
排入调用堆栈之前，尝试调整
gameOver
的签名，以获取路由状态有效负载，以包含
checkAnswer
中组件状态的副本

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

}其他{
console.log（“不正确”）；
swal（“如此接近！”，this.state.explauration，“错误”，
{
closeOnClickOutside:false，
按钮：{
确认：“查看您的最终分数！”
},
}).然后（函数（）{
this.gameOver（this.state.gameScore）；//嗨！谢谢，我刚试过，但还是无法读取未定义的属性“gameOver”：（@heygudetama我不明白为什么
this
对于
this.gameOver
使用上述任何一种修复程序都会未定义。可能在您的代码中的某个地方
当尝试访问
this.state.gameOver
时，此
未定义。您是否有可以在您的问题中共享的错误的堆栈跟踪，以便我们看到什么调用了t和行号等…？是的，我也不确定..我在checkAnswer中做了一个控制台登录，它确实显示了游戏分数，如果这是您所指的？我还编辑了问题以显示错误发生的位置。感谢您迄今为止的帮助：）@heygudetama，因此它在这一行中阻塞了
this.gameOver（）
？出于好奇，
这个.props.onHide（）；
在
检查答案的末尾做了什么？
？是的。我也添加了主要的游戏代码，现在我想它可能与此有关：
onHide（）
设置Hacker.js中的
showQuizModal:false
状态，以在回答质询问题时隐藏模式
gameOver = () => {
  this.props.history.push({
    pathname: `/gameover`,
    gameScore: this.state.gameScore,
  });
};

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