我正在尝试做什么:
在我的网站上,我创建了一个注册表单,我想在提交后执行两项操作:
将用户订阅 MailChimp EDM 列表(仅使用“姓名”、“电子邮件”字段)。
通过执行 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();
会破坏表单提交操作 - 所以我猜测这是执行订阅操作所需时间的问题。
任何人都可以阐明这里发生的事情以及潜在的解决方案吗?
您能否在
preventDefault
之前先 await
,然后在异步调用 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,
});
}
}