Estoy trabajando en un proyecto usando reaccionar, y necesito redirigir a una página iniciada si el registro es exitoso, así que agregué un estado llamado redirección, vacío cuando accede al formulario de registro que necesito configurar para que la página pueda redirigir , dado que uso un controlador, este es el código del componente relevante:
class Registro extends Component { constructor() { super(); this.state = { email: "", password: "", passwordConfirm: "", userName: "", redirect: "", }; } handleRedirect = () => { this.setState({ redirect: "/aplicacion" }); console.log(this.state); } render() { if (this.state.redirect) { return <Navigate to={this.state.redirect} /> } return ( <button id="submit" className="btn btn-outline-accesible col-3 m-2 mt-3" onClick={() => { registerWithEmailAndPassword(this.state.userName, this.state.email, this.state.password).then( handleRedirect() )}}>Acceder</button>Y el registro con correo electrónico y contraseña es esta función:
const registerWithEmailAndPassword = async (name, email, password) => { try { console.log(name, email, password) const res = await createUserWithEmailAndPassword(auth, email, password); const user = res.user; await setDoc(doc(db, "users", email), { email: email, nombre: name, pass: password }); alert("Registro completado con éxito") } catch (err) { console.error(err); alert(err.message); } };El resultado esperado es que si el registro es exitoso, la página se vuelve a cargar y puede seguir su camino feliz, pero si hay un error, la página no se cargará y el error será alertado al usuario. Lo que pasa es que en caso de que haya un error, la página te redirige y luego te muestra una alerta con los datos del error.
Gracias por leer y reflexionar sobre esto conmigo.
¿Cuál es la idea detrás del enfoque de mezcla?
Esto debería funcionar
class Registro extends Component { render() { if (this.state.redirect) { return <Navigate to={this.state.redirect} />; } return ( <button id="submit" className="btn btn-outline-accesible col-3 m-2 mt-3" onClick={this.handleClick} > Acceder </button> ); } handleClick = async () => { try { await registerWithEmailAndPassword( this.state.userName, this.state.email, this.state.password ); handleRedirect(); } catch (err) { console.error(err); alert(err.message); } }; } const registerWithEmailAndPassword = async (name, email, password) => { console.log(name, email, password); const res = await createUserWithEmailAndPassword(auth, email, password); const user = res.user; await setDoc(doc(db, "users", email), { email: email, nombre: name, pass: password, }); alert("Registro completado con éxito"); }; ACTUALIZACIÓN: tenga en cuenta que registerWithEmailAndPassword también se actualizó para admitir el manejo correcto de errores de acuerdo con la solicitud
Su función registerWithEmailAndPassword es asíncrona , por lo que devuelve una Promesa . En esta función, llama a otra función asíncrona y espera su respuesta. Está capturando las excepciones lanzadas por setDoc . Entonces su registerWithEmailAndPassword siempre se resuelve. Lo que puedes hacer es:
const registerWithEmailAndPassword = async (name, email, password) => { try { console.log(name, email, password) const res = await createUserWithEmailAndPassword(auth, email, password); const user = res.user; await setDoc(doc(db, "users", email), { email: email, nombre: name, pass: password }); alert("Registro completado con éxito") return true } catch (err) { console.error(err); alert(err.message); return Promise.reject(false); } };