Я просто пытаюсь вызвать функцию submitformdata(data
), которая отправляет данные в базу данных и по завершении возвращает строку successRegister
. После возврата этой строки успеха я хочу перейти прямо на страницу входа без дальнейшего взаимодействия с пользователем. То, что у меня ниже, работает без ошибок, но не переходит на страницу \Login, даже если для переменной toLogin
установлено значение successRegister
, проверенное оператором журнала консоли. Я ожидаю, что это что-то концептуальное, что мне не хватает в отношении того, как обновляются состояния пользовательского интерфейса.
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);
Во-первых, значение «toLogin» не меняется сразу. Пожалуйста, перепроверьте концепцию хука здесь https://reactjs.org/docs/hooks-state.html
Чтобы обновить пользовательский интерфейс, вам нужно использовать переменную «toLogin» в вашем коде возврата.
Если вы используете react-router-dom для маршрутизации, вы можете использовать хук useNavigate(), как показано ниже, но все же это зависит от версии react-router-dom.
И для вас информация об использовании хуков useState является асинхронной, и каждый раз, когда вы обновляете переменные состояния, реакция будет повторно отображать компонент, таким образом, вместо того, чтобы включать <Navigate to = "/login">
внутреннюю функцию, которую вы можете включить в сам компонент рендеринга.
{переменная состояния и }.
import {useNavigate} из "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>
);
}
Есть несколько вещей, которые вы должны учитывать при использовании реактивных хуков. Во-первых, мне нужно использовать реагирующий хук или я могу использовать обычную переменную? Если вы можете использовать простую переменную и вам не нужно сохранение состояния между рендерингами, используйте переменную. Если вам необходимо сохранение между рендерингами, используйте хук! all и не требует, чтобы он был постоянным между рендерами! С логикой, описанной выше, мы можем видеть, что в этом случае нет реальной причины или необходимости в этом хуке. Проверьте код ниже.
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);
Спасибо. Очень информативный и исчерпывающий ответ.