在Next.js应用程序中阻止多个表单提交/取消对表单提交的获取请求

Question

我的Next.js应用程序中有一个注册表单。

不良行为：如果用户点击"；注册"；提交按钮，然后应用程序发出多个提取请求，界面上显示多个toast。

期望的行为：在第一次提交完成之前，用户在按下提交后不能执行任何操作。

我的第一个想法是使API调用同步。但由于我不完全理解的原因，这似乎被认为是一个坏主意：

• 在这里看到唯一的答案，它建议不要这样做：如何使javascript获取同步

我也研究过类似的其他问题，但答案没有帮助：

• 请参阅如何防止表单从客户端多次提交？当存在表单验证时，顶部答案不起作用。并使用JQuery

我不太明白为什么同步请求不是这里的最佳实践。当然，我在I/O操作期间阻塞了CPU，但在表单提交完成之前，我不希望页面做任何事情？

建议采用什么方法来防止提交表单时切换反弹？你能解释一下原因吗？

src/pages/auth/sign-up.js:

const onSubmit = async (data) => {
const { email, password1, password2, first_name, last_name } = data;
const response = await postSignUp( email, password1, password2, first_name, last_name );
// error handling code
toast.success('You have successfully registered!', { autoClose: 2500 })
setTimeout( () => {
router.push({ pathname: '/auth/verify-email', query: { email: email } });
}, 2500 )

/src/lib/api.js:

export async function postSignUp(email, password1, password2, first_name, last_name) {
const response = await fetch(SIGN_UP_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify( { email, password1, password2, first_name, last_name } ),
});
const json = await response.json();
return json;
}

Answer 1

一个非常简单且通常使用的方法是禁用提交按钮，直到您从API收到响应。例如：

创建状态：

const [isSubmitting, setIsSubmitting] = useState(false);

使用该状态设置提交按钮的disabled属性：

<button type="submit" disabled={isSubmitting}>Save</button>

从事件处理程序调用setIsSubmitting

const onSubmit = async (data) => {
setIsSubmitting(true);
const { email, password1, password2, first_name, last_name } = data;
const response = await postSignUp( email, password1, password2, first_name, last_name );
// error handling code
toast.success('You have successfully registered!', { autoClose: 2500 })
setTimeout( () => {
router.push({ pathname: '/auth/verify-email', query: { email: email } });
}, 2500 )
setIsSubmitting(false);
}