javascript - React JS App 在输入内容时冻结浏览器

我对 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 函数的情况下运行您的代码,只删除样式,只渲染输入按钮,它工作正常,并且事件发生完美用于设置电子邮件和密码字段。但我认为你应该对你的代码做一点修改。在推送回家路线之前,请先检查用户对象是否包含任何数据。

相似文章

最新文章