每当我尝试使用 Firebase 输入新值时，我的 React JS 前端应用程序就会冻结

Question

我目前正在按照教程制作一个使用 Firebase 进行身份验证的简单前端应用程序。当我只有注册新用户的逻辑时，我的代码似乎可以正常工作，但是，当我为尝试登录的用户添加逻辑时，出现了问题。每次我只需单击“电子邮件”框进行登录时，我的应用程序就会冻结。

这是我的应用程序的显示（忽略蓝线）：

这是 App.js 的代码：

import { useState } from 'react';
import './App.css';
import { createUserWithEmailAndPassword,
onAuthStateChanged,
signInWithEmailAndPassword,
signOut } from 'firebase/auth';
import { auth } from './firebase-config'

function App() {
  const [registerEmail, setRegisterEmail] = useState('')
  const [registerPassword, setRegisterPassword] = useState('')
  const [user, setUser] = useState({});
  const [loginEmail, setLoginEmail] = useState('')
  const [loginPassword, setLoginPassword] = useState('')

  onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser)
  }, [])

  const register = async() => {
    try {
      const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword);
      console.log(user)
    } catch (err) {
      console.log(err.message)
    }
  };

  const login = async() => {
    try {
      const user = await signInWithEmailAndPassword(auth, loginEmail, loginPassword);
      console.log(user)
    } catch (err) {
      console.log(err.message)
    }

  };

  const logout = async() => {

    await signOut(auth);

  };


  return (
    <div className="App">
      <div>
        <h3> Register User </h3>
        <input placeholder='Email...' onChange={(e) => setRegisterEmail(e.target.value)}/>
        <input placeholder='Password...' onChange={(e) => setRegisterPassword(e.target.value)}/>
        <button onClick={register}> Create User</button>
      </div>

      <div>
        <h3> Login </h3>
        <input placeholder='Email...' onChange={(e) => setLoginEmail(e.target.value)}/>
        <input placeholder='Password...' onChange={(e) => setLoginPassword(e.target.value)}/>

        <button onClick={login}> Login</button>
      </div>

      <h4> User Logged In: </h4>
      {user?.email}

      <button onClick={logout}> Sign Out </button>
    </div>
  );
}

export default App;

最后，这里是 firebase.config.js 文件的代码：

import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "AIzaSyANfrqNmIbJLZlN-j6oOrjL8ZRv-YYM10M",
  authDomain: "authentication-tutorial-3259a.firebaseapp.com",
  projectId: "authentication-tutorial-3259a",
  storageBucket: "authentication-tutorial-3259a.appspot.com",
  messagingSenderId: "145171676516",
  appId: "1:145171676516:web:044dfc2fc86abbb1d74e71"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

Answer 1

您需要为两个输入添加值。该值没有改变，因此您会感觉应用卡住了。

用于注册输入

<input value={registerEmail} placeholder='Email...' onChange={(e) => setRegisterEmail(e.target.value)}/>
<input value={registerPassword} placeholder='Password...' onChange={(e) => setRegisterPassword(e.target.value)}/>

用于登录输入

<input value={loginEmail} placeholder='Email...' onChange={(e) => setLoginEmail(e.target.value)}/>
<input value={loginPassword} placeholder='Password...' onChange={(e) => setLoginPassword(e.target.value)}/>

每当我尝试使用 Firebase 输入新值时，我的 React JS 前端应用程序就会冻结

My React JS frontend application freezes whenever I try to input a new value using Firebase

javascript

firebase

reactjs

firebase-authentication