我正在尝试做的事情:
在我的网站上,我创建了一个注册表单,我想在提交后执行两个操作:
1) 为用户订阅 MailChimp EDM 列表(仅使用姓名、电子邮件字段)。
2) 通过执行 POST 操作将完整的表单存储在 Netlify 中(所有字段,尤其是它们的消息)
这是我的表格:
<form
className={`contact-form ${submitError ? 'has-error' : ''}`}
name={formName}
method="POST"
onSubmit={event => this.submitHandler(event)}
action="/thank-you/"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
// Form fields
</form>
这是我的 onSubmit 处理程序:
submitHandler = async (event) => {
const {
email,
fieldValues,
submitting,
} = this.state;
if (submitting) return false;
this.setState({
submitting: true,
submitError: false,
});
const result = await addToMailchimp(email, fieldValues);
if (result.result === 'success') {
// Inconsequential, as success should result in redirection to the success page
this.setState({
submitting: false,
});
} else {
event.preventDefault(); // this SHOULD stop form submit?
this.setState({
errorMessage: decodeEntities(result.msg),
submitError: true,
submitting: false,
});
}
}
这里发生了什么:
正如您在代码片段中看到的那样,为了实现这一点,我尝试首先使用用户提交的字段异步订阅 MailChimp,如果我没有收到成功消息,我将中断提交操作使用 event.preventDefault();
。
作为奖励,这对于防止重复注册也很有用,因为如果他们已经在订阅列表中,我会从 MailChimp 收到一条消息。
问题:
然而,实际情况是无论订阅操作是否完成、成功或不成功,表单都会提交并重定向到成功页面 (/thank-you/
)。
我有大约 50% 的表单提交导致了 MailChimp 订阅,而另一半则没有。当我对此进行测试时,有时我会在页面重定向到成功页面 (/thank-you/
) 之前看到订阅成功/失败消息闪烁。
值得注意的是 event.preventDefault();
如果在异步/await 函数之前执行表单提交操作,它会破坏表单提交操作 - 所以我猜这是一个时间问题执行订阅操作。
谁能阐明这里发生的事情以及可能的解决方案?
最佳答案
你能不能在 await
之前 preventDefault
,然后在异步调用成功后调用表单上的 submit()
addToMailchimp
?
submitHandler = async (event) => {
event.preventDefault()
const form = e.target
const {
email,
fieldValues,
submitting,
} = this.state;
if (submitting) return false;
this.setState({
submitting: true,
submitError: false,
});
const result = await addToMailchimp(email, fieldValues);
if (result.result === 'success') {
// Inconsequential, as success should result in redirection to the success page
this.setState({
submitting: false,
});
form.submit()
} else {
this.setState({
errorMessage: decodeEntities(result.msg),
submitError: true,
submitting: false,
});
}
}
关于forms - 在提交表单后执行异步功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57122829/