Soy bastante nuevo en React JS y estaba tratando de crear una aplicación. Sin embargo, cada vez que escribe algo en un libro de texto, toda la aplicación parece congelarse y luego deja de funcionar.
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> ) } Cualquier ayuda sería apreciada porque esto me impide progresar más, ya que necesito volver a ejecutar la aplicación usando npm start para que funcione.
Creo que su problema es que en cada representación del componente SignIn llama al oyente onAuthStateChanged . Nunca he usado esto, pero supongo que debería llamarse solo una vez, cuando se monta el componente.
Así que podrías hacer algo como esto en su lugar:
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(''); // ... }Creo que todo está bien, ya que intenté ejecutar su código sin las funciones de Firebase y simplemente eliminé los estilos, solo representé el botón de entrada y funcionó bien y los eventos ocurren perfectamente para configurar el campo de correo electrónico y contraseña. Pero creo que deberías hacer pequeñas modificaciones a tu código. Primero verifique el objeto de usuario si contiene datos o no antes de presionar la ruta de inicio.