Javascript 在React中防止承诺内的违约

我是一名新的全堆栈开发人员，我正在寻找一些如何处理承诺返回的错误的指针

基本上，我将游戏ID存储在MongoDB集合中。当用户输入游戏ID时，我想检查集合中是否存在该游戏ID。如果没有，我不想将用户链接到新页面。如果是，用户应该转到新页面

目前，我的代码不阻止默认设置，即使我使用event.preventDefault，用户仍会转到“waitpage”。我想知道如何阻止用户访问此页面

这是我现在在前端的代码

const onJoinGame = (event) => {
    event.persist()
    axios.get(`${BACKENDLINK}/rooms/${gameId}/room_available`)
        .then((res) => {
            if(res.data.Status == true){
                axios.put(`${BACKENDLINK}/rooms/${gameId}/add_user`,
                 {
                    username: username
                 })
            }
        })
        .catch((error) => {
            event.preventDefault()
            setErrorGameId("That game doesn't exist!")
        })
}

在return语句中，我像这样使用这个函数

<Link to={`/${gameId}/waitpage`} onClick={(event) => onJoinGame(event)}>
    <button className = "submit" id="joinGame">Join Game</button>
</Link>

---

任何帮助都将不胜感激

您不能阻止事件执行承诺，您需要在事件处理程序中同步执行该操作

如果您确实需要导航到另一个页面，那么您必须使用正在使用的路由器包（提供

链接

）的命令式API手动导航到另一个页面

const roomAvailable = (req, res) => {
Room.findOne({roomId: req.params.id}, (err, result) =>{
    if(!result){
        res.status(400).json('Error: ' + err) 
    }
    else{
        
        res.json({'Status': true})
    }
})
}