javascript - Axios 正在阻止执行其他方法

Question

我有一个模态表单，我想在提交后立即关闭。表单工作得很好，从表单输入的数据反射(reflect)在数据库中，但由于某种原因，同一方法中的其余操作没有被触发。

我希望表单在按下提交按钮时执行:

1) 通过`setLoading(true)将loading改为true

2) 发布输入数据

3) 关闭模态

目前，1) 和 3) 没有执行。如果我注释掉 axios，closeModal 工作正常。

模态如下:

const Form = ({ closeModal }) => {
    const [email, setEmail] = useState('')
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [loading, setLoading] = useState(false)

    const handleSubmit = async e => {
        setLoading(true)                
        e.preventDefault()    
        try {
            await axios.post(`${ROOT_URL}/createEmailList`, {
                email,
                firstName,
                lastName
            })
        } catch (err) {
            console.log(err)
        } finally {
            setLoading(false)
            closeModal()                        
        }
    }

    return (
        <form 
            className="form"
            onSubmit={handleSubmit}
        >
            <div className="label">Name *</div>
            <div className="desc">What is your name?</div> 
            <div className="input-container">
                <label className="label">
                    <input 
                        className="input" 
                        type="text" 
                        value={firstName} 
                        onChange={e => setFirstName(e.target.value)} 
                    />
                    <div className="desc">First Name</div>
                </label>
                <label className="label">
                    <input 
                        className="input"
                        type="text" 
                        value={lastName} 
                        onChange={e => setLastName(e.target.value)} 
                    />
                    <div className="desc">Last Name</div>
                </label>
            </div>
            <div className="label">Email Address *</div>
            <div className="input-container">
                <label className="label">
                    <input 
                        className="input2" 
                        type="email" 
                        value={email} 
                        onChange={e => setEmail(e.target.value)} 
                        required
                    />
                </label>
            </div>
            <button className="button">
                {loading ? "Loading..." : "Submit"}
            </button>
        </form>
    )
}

另外，我使用 Google Functions(Firebase) 作为后端。

更新:

const handleSubmit = async e => {
    setLoading(true)                
    e.preventDefault()    
    try {
        await axios.post(`${ROOT_URL}/createEmailList`, {
            email,
            firstName,
            lastName
        })
    setLoading(false)
    closeModal() 
    } catch (err) {
        console.log(err)
    }
}

Answer 1

关闭模式并在 then() 中使加载为 false 并产生响应。

const handleSubmit = async e => {
      setLoading(true)                
      e.preventDefault()  
        await axios.post(`${ROOT_URL}/createEmailList`, {
            email,
            firstName,
            lastName
        })
       .then(res=> { 
         if(res.status===204 || res.status===200){
           setLoading(false)
           closeModal()
          } 
       })
       .catch(err=> console.log(err));
    }