React обновляет страницу после отправки запроса с файлом
Как я нашел в интернете, причина тому - появление нового файла в отслеживаемой папке. Я загружаю фотографию в запросе. На бэкенде все прекрасно, но вот на фронте после отправки формы страница делает перезагрузку, сбрасывая тем самым весь редакс.
event.preventDefault() здесь ни причем, как думаю
Именно после отправки axios запроса страница рефрешится.
return (
<div ref={overlay} className={styles.main}>
<div className={styles.uploader}>
<img className={styles.loadImage} onClick={handleClick} src='/load.png' />
<ExitButton closeFunction={handleClose} />
<input
onChange={handleChangeInputFiles}
type='file'
accept={getAcceptTypesFile()}
multiple={data.isMultiple}
ref={inputFile}
/>
<button className={styles.submitButton} onClick={handleSubmit}>грузи</button>
<LoadedFiles files={data.files} />
</div>
</div>
)
async function sendFiles(files) {
const formData = new FormData();
for (const file of files) {
formData.append('files', file);
};
formData.set('token', ACCESS_TOKEN);
const res = await axios.post(data.apiUrl, formData);
if (res.data.status === 200) {
dispatch({ type: 'SET_CURRENT_OPENED_PROFILE_DATA_AVATAR_URL', payload: res.data.avatarUrl });
handleClose();
} else {
// set error notification
}
}
На тот факт, что при клике на кнопку отправки вызывается handleSubmit внимания не обращайте, там идет лишь проверка заполнения, после чего вызывается функция sendFiles