Question

我有一个要提交后立即关闭的表单形式的表单。表单工作得很好，并且表单输入的数据可以反映在数据库中，但是由于某种原因，同一方法中的其余操作不会被触发。

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

1）通过`setLoading（true）

将loading更改为true

2）发布输入数据

3）关闭模式

目前，没有执行1）和3）。如果我将closeModal注释掉，则axios可以正常工作。

以下是模式：

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

我认为您的finally在执行异步API调用之前就已执行。

也许，您可以将response和error的axios调用链接为

 await axios
    .post(`${ROOT_URL}/createEmailList`, {
        email,
        firstName,
        lastName
    })
    .then(response => {
        /*
        You could close modal and set loading to false here
        */
    })
    .catch(err => {
        /*
        catch errors
        */
    });

这将删除对try-catch块的依赖

Answer 2

关闭模式，并在then()中产生共振，使加载错误。

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));
    }

Axios阻止执行其他方法

2 个答案: