useForm 사용 시 전달해주는 onSubmit 함수에서 라우터 처리를 해버리면
onSubmit: async values => {
...
history.push(`/series/${id}`);
},
onSubmit함수가 끝난 후 페이지가 넘어가 버리기 때문에 남아있는 로직(setErrors, setIsLoading)들이 실행되지 못해 오류가 발생한다
const handleSubmit = async e => {
setIsLoading(true);
e.preventDefault();
const newErrors = validate(values);
if (!newErrors || Object.keys(newErrors).length === 0) {
const resErrors = await onSubmit(values);
setErrors({
...newErrors,
...resErrors,
});
} else setErrors(newErrors);
setIsLoading(false);
};
해결법
useForm컴포넌트가 마운트 될 때 처리하지 못한 로직들이 종료되도록 useEffect에서 cleanUp함수를 반환해준다
useEffect(
() => () => {
setErrors({});
setIsLoading(false);
},
[],
);
라우터 컴포넌트 사용시 url 구성에 따라 순서가 중요하다