我对 React JS 很陌生，正在尝试制作一个应用程序。但是，每当在教科书中输入内容时，整个应用程序似乎都会冻结然后停止工作。
import React, { useState } from 'react'
import { auth } from './firebase';
import styles from '../static/SignIn.module.css';
import { Link, useNavigate } from "react-router-dom";
import {
// createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged,
// signOut,
} from "firebase/auth";
export default function SignIn(){
const [user, setUser] = useState({});
const history = useNavigate();
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
});
// const goBack = () => {
// history.push('/')
// };
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const signIn = async() => {
try {
const user = await signInWithEmailAndPassword(
auth,
email,
password
);
history.push('/home')
console.log(user);
} catch (error) {
console.log(error)
if (password.length < 6){
alert('Password should be at least 6 characters!')
}
}
}
return(
<div className={styles.main}>
<div className={styles.center}>
<h1>Login</h1>
<div className={styles.form}>
<div className={styles.txt_field}>
<input type="text" id='text' name='text' value={email} onChange={e => setEmail(e.currentTarget.value)} required/>
<span></span>
<label>Email ID</label>
</div>
<div className={styles.txt_field}>
<input type="password" id='password' name='password' value={password} onChange={e => setPassword(e.currentTarget.value)} required/>
<span></span>
<label>Password</label>
</div>
<input type="submit" value="Login" onClick={signIn}/>
<div className={styles.signup_link}>
Not a member? <Link to="/signup">Signup</Link>
</div>
</div>
</div>
</div>
)
}任何帮助将不胜感激，因为这会阻止我进一步进步，因为我需要使用 npm start 重新运行应用程序才能使其正常工作。
回答1
我认为您的问题是，在 SignIn 组件的每次渲染中，您都调用了 onAuthStateChanged 侦听器。我从未使用过它，但我的猜测是它只需要在组件安装时调用一次。
所以你可以这样做：
export default function SignIn(){
const [user, setUser] = useState({});
const history = useNavigate();
React.useEffect(() => {
onAuthStateChanged(auth, (currentUser) => setUser(currentUser))
// Notice the empty dependency array, there to make sure the effect is only run once when the component mounts
}, [])
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
// ...
}回答2
我认为一切都很好，因为我尝试在没有 firebase 函数的情况下运行您的代码，只删除样式，只渲染输入按钮，它工作正常，并且事件发生完美用于设置电子邮件和密码字段。但我认为你应该对你的代码做一点修改。在推送回家路线之前，请先检查用户对象是否包含任何数据。