React Hook Form isSubmitting状态异常，无法显示加载指示器

问题根源 #

React Hook Form的isSubmitting状态仅在onSubmit函数的执行周期内保持true。如果你的onSubmit是同步函数——哪怕函数内部包含异步网络请求——函数本身会瞬间执行完毕，导致isSubmitting立刻从true切换回false，加载指示器根本来不及显示。

解决方案：让onSubmit返回Promise #

要让isSubmitting在整个提交过程（包括网络请求）中保持true，需要让onSubmit函数返回一个Promise，告知React Hook Form等待异步操作完成。

方式1：使用async/await（推荐） #

把onSubmit声明为async函数，内部用await处理网络请求：

const myForm = () => {
    const formMethods = useForm()
    const { formState, handleSubmit, getValues } = formMethods
    const { isSubmitting } = formState

    const onSubmit = async () => {
        // 用await等待网络请求完成
        await fetch('/your-submit-api', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(getValues())
        });
        // 请求完成后的逻辑，比如提示成功
    }

    return (
        <>
            {isSubmitting && <LoadingIndicator />}
            <form onSubmit={handleSubmit(onSubmit)}>
                {/* 表单控件 */}
            </form>
        </>
    )
}

方式2：手动返回Promise #

如果不使用async/await，可以手动创建并返回Promise：

const onSubmit = () => {
    return new Promise((resolve, reject) => {
        fetch('/your-submit-api', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formMethods.getValues())
        })
        .then(response => {
            // 处理响应
            resolve();
        })
        .catch(error => {
            // 处理错误
            reject(error); // 或resolve，根据错误处理逻辑决定
        });
    });
}

原理说明 #

当onSubmit返回Promise时，React Hook Form会等待这个Promise状态改变（resolve或reject），在此期间isSubmitting会持续保持true，加载指示器就能正常显示直到提交完成。

内容的提问来源于stack exchange，提问作者noblerare