Отправление 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 запрос с уже измененными данными.

Проблема:

  1. Если использовать useEffect c зависимостью settings - он вызовется первый раз, когда будет считывать данные и вызовет setSettings(data)
  2. Если вызвать его внутри handleChangeSettings-a - то он не успеет обновить данные и пошлёт axios запрос с предыдущим значением.

Как в функциональном компоненте решить данную проблему?


Ответы (0 шт):