Отправление axios запроса после выбора нового значения селекта
Имеется простой код компонента, который получает настройки и рисует селект с выбором Включить\Выключить.
export default function TestComponent() {
const [settings, setSettings] = useState();
const get_settings = async () => {
try {
const {data} = axios.get....
setSettings(data)
} catch...
};
const update_settings = async () => {
//тут обычный axios POST запрос
}
useEffect(() => {
get_settings();
}, [])
const handleChangeSettings = (e) = {
setSettings(e.target.value)
// send update?
}
return (
<select
value={settings}
onChange={handleChangeSettings}
>
<option value="on">Включен</option>
<option value="off">Выключен</option>
</select>
)
}
Каким образом при переключении селекта отправить POST запрос с новыми данным? Пример: Пользователь меняет с Включить на Выключить => отправляется axios запрос с уже измененными данными.
Проблема:
- Если использовать useEffect c зависимостью settings - он вызовется первый раз, когда будет считывать данные и вызовет setSettings(data)
- Если вызвать его внутри handleChangeSettings-a - то он не успеет обновить данные и пошлёт axios запрос с предыдущим значением.
Как в функциональном компоненте решить данную проблему?