为什么我的代码在等待语句之后不执行

Question

我的javascript react应用程序使用谷歌firebase进行身份验证时遇到问题。。。。。"等待"之后的代码没有执行，chrome进行了一些奇怪的重新加载(看起来(。

我试图重建我在本教程中看到的东西：

https://www.youtube.com/watch?v=K_wZCW6wXIo

https://github.com/mehulmpt/firebase-react-hooks

这是我的Login.js

...
....
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit" onClick={login}>
Submit
</Button>
</Form>
);
async function login() {
try {
console.log("l1");
await firebase.login(email, password);
console.log("l2");
debugger;
props.history.replace("/impressum");
} catch (error) {
console.log("l3");
alert(error.message);
}
}

这里是firebase.js辅助类：

class Firebase {
constructor() {
app.initializeApp(config);
this.auth = app.auth();
this.db = app.firestore();
}
login(email, password) {
return this.auth.signInWithEmailAndPassword(email, password);
}
...
...

当我用"npm start"(它是一个react应用程序(运行应用程序时，打开控制台和调试器的Chrome Developer窗口，然后点击登录表单的"提交"按钮，我会在控制台中看到"l1"日志输出大约半秒。然后，开发人员窗口似乎重新加载，控制台似乎被重置，"l1"消失，"l2"、"l3"根本不出现。调试器不会在断点处停止，也不会执行对"/premsum"的重定向。

我现在绝望了。我尝试了数百种变体我的异步，等待，然后，捕获。。。。我甚至不知道我的代码是否错误，或者我的chrome是否有问题(但在firefox中也是一样(。

我希望你能有所提示。

Answer 1

浏览器端JavaScript程序在网页上下文中运行。

提交按钮提交表单。

提交表单后，浏览器将导航到新网页。

由于JS程序运行的页面已被导航离开，因此该JS程序退出。它在到达console.log("l2");之前执行此操作

您可能想要阻止提交按钮的默认行为。