0
722
ViewsLa interfaz de usuario de React no se actualiza al regresar <Navegar a="/Iniciar sesión" />
Simplemente estoy intentando llamar a una función de submitformdata(data ), que envía datos a una base de datos y devuelve una cadena de successRegister de éxito al finalizar. Tras el regreso de esta cadena de éxito, quiero navegar directamente a la página de inicio de sesión sin más interacción del usuario. Lo que tengo a continuación se ejecuta sin errores, pero no navega a la página \Login incluso cuando la variable toLogin está configurada en successRegister verificado por una declaración de registro de la consola. Espero que sea algo conceptual que me falta con respecto a cómo se actualizan los estados de la interfaz de usuario.
export default function Register() { const [toLogin, setToLogin] = React.useState("failRegister"); const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); if (data.get('email') === '' || data.get('password') === '' || data.get('verifypassword') === '' || data.get('firstName') === '' || data.get('lastName') === '') { return } submitformdata(data).then(response => { setToLogin(response); if (toLogin === "successRegister") { return <Navigate to="/Login" />; } }); }; return (code here for the Register page);3 answers
Answer question0
Lo primero es que el valor de "toLogin" no cambia inmediatamente. Vuelva a verificar el concepto de gancho aquí https://reactjs.org/docs/hooks-state.html
Para actualizar la interfaz de usuario, debe usar la variable "toLogin" en su código de retorno 
0
Si está utilizando react-router-dom para el enrutamiento, puede usar el gancho useNavigate() como se muestra a continuación, pero aún depende de la versión de react-router-dom.
Y para su información, los ganchos useState son asíncronos y cada vez que actualice las variables de estado, la reacción volverá a representar el componente, en lugar de incluir <Navigate to="/login"> dentro de la función que puede incluir en el propio componente de representación. {varEstado & }.
import { useNavigate } desde "react-router-dom";
function Invoices() { let navigate = useNavigate(); return ( <div> <NewInvoiceForm onSubmit={async (event) => { let newInvoice = await createInvoice( event.target ); navigate(`/invoices/${newInvoice.id}`); }} /> </div> ); }0
Hay algunas cosas que debe considerar al usar ganchos de reacción. Primero, ¿necesito usar un gancho de reacción o puedo usar una variable simple? Si puede usar una variable simple y no necesita persistencia entre renderizados, entonces use una variable.
Si debe tener persistencia entre los renderizados, ¡entonces use un gancho!
¡El código que proporcionó no usa el enlace de estado toLogin en absoluto, y no requiere que sea persistente entre los renderizados! Con la lógica encontrada anteriormente, podemos ver que no hay una razón o necesidad real para este gancho en este caso. Echa un vistazo al código a continuación.
import { useNavigate } from 'react-router-dom'; //using v6 here....
//No hooks required for persistence between renders. //You can use a hook if you wish to handle errors and display them. const navigate = useNavigate(); const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); if (data.get('email') === '' || data.get('password') === '' || data.get('verifypassword') === '' || data.get('firstName') === '' || data.get('lastName') === '') { return } submitformdata(data).then(response => { //In this case the response must be "successRegister" if (response === "successRegister") { //returning <Navigate to="/Login" /> doesn't work because it is the return of the onSubmit function. navigate("/Login"); //No return needed for this function. } }); }; return (code here for the Register page);Más detalles
Expliquemos por qué su código no funciona como esperaba. En primer lugar, las actualizaciones de estado de enlace de React son asincrónicas, lo que significa que no suceden de inmediato. Entonces, cuando configura ToLogin usando su envío del enlace useState, en realidad no ha actualizado la "variable" toLogin o el estado toLogin. Entonces, todo lo que se ve en la declaración if es el valor original de "failRegister" en el que se inicializó.En segundo lugar, no está devolviendo un componente de interfaz de usuario a ReactDOM, está devolviendo un componente de reacción (JSX) a la función onSubmit (que no representa nada). Usando la versión 6 de react-router-dom, puede usar el enlace Navigate para manejar React Navigation entre páginas.
La razón por la que elegí el código anterior es porque no encuentro una razón para establecer una variable en el objeto de respuesta si todo lo que vamos a hacer es una declaración if rápida para comparar la respuesta con una cadena... Así que comparé directamente sin variable intermedia y dejó el resto de su código igual (eliminando el gancho no utilizado y agregando el nuevo gancho de navegación). Para hacer que su código de registro sea más robusto, puede agregar un bloque "else" a su declaración if y agregar un gancho que maneje los errores y los muestre adecuadamente.
Feliz codificación y aprendizaje.