Не получаю изменение полей через onChange
Делаю форму добавления записи на сайт. Если я заполняю сразу поля с текстом, а потом прикрепляю изображение, то всё работает отлично - изображение отправляется на сервер, а данные отправляются в БД. Но если я сразу прикреплю изображение, то моя form, в которую я сохраняю данные перестаёт обновляться. Во время отладки я проверил, что даже после добавления изображения changeHandler всё ещё работает, но данные почему-то не обновляются. В чём может быть проблема?
Код React:
import React, {useState, useCallback} from 'react';
import {useHttp} from '../hooks/http.hook';
import axios from 'axios';
export const AdminPage = () => {
const[img, setImg] = useState(null);
const {loading, error, request} = useHttp();
const [form, setForm] = useState({
title: '', image: '', text: '', shortText: ''
});
const changeHandler = event => {
if([event.target.name] == "image"){
setImg(event.target.files[0]);
setForm({ ...form, image: event.target.files[0].name})
} else {
setForm({ ...form, [event.target.name]: event.target.value });
}
}
const postHandler = useCallback(async () => {
try {
try{
const data = new FormData();
data.append('image', img);
console.log(data)
await axios.post("/api/upload", data, {
headers: {
'content-type': 'multipart/form-data'
}
})
} catch (err) {}
console.log('Posting')
const data = await request('/api/admin/post', 'POST', {...form})
} catch (e) {}
}, [img]);
return (
<div>
<h1>AdminPage</h1>
<div class="input-container">
<label class="input-title" for="title">Title</label>
<input class="input-field" type="text" autofocus id="title" name="title" required onChange={changeHandler}/>
<label class="input-title" for="img">Img</label>
<input class="input-field" type="file" name="image" required onChange={changeHandler}/>
<label class="input-title" for="text">Text</label>
<input class="input-field" type="text" id="text" name="text" required onChange={changeHandler}/>
<label class="input-title" for="text">shortText</label>
<input class="input-field" type="text" id="shortText" name="shortText" required onChange={changeHandler}/>
</div>
<div class="body-buttons">
<button class="singin-button" onClick={postHandler}>APP POST</button>
<button class="back-button" type="reset">RESET</button>
</div>
</div>
)
};
Ответы (1 шт):
Автор решения: Андрей Войтешик
→ Ссылка
Проблема была в useCallback, в зависимостях которого было img. Я убрал его и теперь всё работает корректно!

