Hej,
na ogół pierwszy raz piszę w react i pojawił się pewien problem.
Ogółem chodzi o obsługę danych otrzymanych z formularza.
Inicjalizuję dwa stany:
- Values - dane otrzymane z formularza,
- Errors - co chcę wyświetlić gdy np nie pasują hasła itp.
Dane wysyłam do backendu, tam są one weryfikowane odsyłana jest odpowiedź z errorem bądź bez niego.
Ustawiam też flagę IsSubmitting, która następnie pozwala na przekierowanie gdy dane w formularze zostały wpisane i przesłane prawidłowo.
Mam taką funkcję:
const useForm = (callback) => {
const [values, setValues] = useState({
email: '',
password1: '',
password2: '',
})
const [errors, setErrors] = useState({})
const [isSubmitting, setIsSubmitting] = useState(false)
const handleChange = e => {
const { name, value } = e.target
setValues({
...values,
[name]: value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axiosInstance.post('auth/register/', values);
setIsSubmitting(true)
} catch (error) {
setErrors({
email: error.response.data.errors["email"],
password1: error.response.data.errors["password1"],
password2: error.response.data.errors["password2"],
})
}
}
useEffect(() => {
console.log("isSubmitting = ", isSubmitting)
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
}, [errors]
)
return { handleChange, values, handleSubmit, errors }
};
export default useForm;
Z tego co widzę problem jest z hookiem useEffect() - nie wywołuje mi się console.log("isSubmitting = ", isSubmitting).
Czy jest ktoś w stanie coś podpowiedzieć?
Pozdrawiam :)
React 
JavaScript
Aisekai