React - event.preventDefault () не работает при отправке

Question

Мне интересно, почему event.preventDefault не работает в моем почтовом запросе. Когда я нажимаю кнопку СОХРАНИТЬ НАСТРОЙКИ, страница перезагружается. Если я просто поставлю console.log после моего event.preventDefault(), он будет работать нормально, так что проблема, я полагаю, в моем запросе. Вот код, любая помощь приветствуется.

import React, { useEffect, useState } from 'react'
import Button from '../shared/formElements/Button';
import { useHttpClient } from '../shared/hooks/http-hook';
import { useForm } from '../shared/hooks/form-hook';
    ...
    ...

    const Settings = () => {
        const { isLoading, error, sendRequest, clearError } = useHttpClient();
        const [loadedSettings, setLoadedSettings] = useState();
        const [formState, inputHandler] = useForm(
        {
            hostname:
            {
                value: '',
                isValid: false
            },
            username:
            {
                value: '',
                isValid: false
            },
            password:
            {
                value: '',
                isValid: false
            },
    
    ...
    ...
            const settingsSubmitHandler = async event => {
                    event.preventDefault()
                    try {
                        await sendRequest(
                            'http://localhost/api/settings/save',
                            'POST',
                            JSON.stringify({
                                hostname: formState.inputs.hostname.value,
                                username: formState.inputs.username.value,
                                password: formState.inputs.password.value,
                                ...
            
                                ...
                        }),
                        {
                            'Content-Type': 'application/json'
                        }
                    );
                } catch (err) { }
            };

И это мой код JSX:

    return (
            <React.Fragment>
                <ErrorModal error={error} onClear={clearError} />
                {isLoading && <LoadingSpinner asOverlay />}
                {!isLoading && loadedSettings && (
                    <form className="settings-form" onSubmit={settingsSubmitHandler}>
                        <div className="container">

            ...

            ...

            <div className="col" align="center">
                <Button type="submit" disabled={!formState.isValid}>SAVE SETTINGS</Button>
            </div>

            ...

Answer 1

Вероятно, это потому, что вы используете функцию async и тело функции вызывается в следующем тике. Если вы удалите async из определения функции, оно должно работать:

const settingsSubmitHandler = event => {
  event.preventDefault()
  sendRequest(...).then(()=> {
    // some async code here
  })
}

Answer 2

Кажется, проблема была в {!isLoading && loadedSettings && (, просто удалил !isLoading, теперь все работает нормально.