react js表单被提交两次

Question

我有下面的代码，它调用保存表单

<div className="col-md-4">
<button onClick={saveCredit}  className="btn btn-success">
Submit
</button>

我有作为的onclick处理程序功能

const saveCredit = () =>{
//validate form
// call api to save form attributes
CreditTransactionDataService.create(data)
.then(response => {
setSubmitted(true);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}

保存成功后，我将显示如下成功消息。

{submitted ? (
<div>
<h4>You submitted successfully!</h4>
<button className="btn btn-success mr-2" onClick={newCreditTransaction}>
Add
</button><Link style={{ fontWeight: 'bold' }} className="btn btn-warning" to={"/creditTransactionList"}>
return to List
</Link>
</div>
)

但问题是，我的表单被提交了两次，并创建了具有相同值的重复记录。。。。有几个保存选项，我限制在数据库级别使用唯一键列，但仍有少数表需要在代码级别处理。。

Answer 1

我无法在codepen中复制它，但一个有点棘手的解决方案是，如果它已经提交，可以在方法中进行检查

const saveCredit = {
//Check if it is submitted
if(!submitted){
//validate form
// call api to save form attributes
CreditTransactionDataService.create(data)
.then(response => {
setSubmitted(true);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
}

这可能不是最好的，但可以完成的工作

还有一件事我注意到了，你的saveCredit函数看起来不像一个函数。

为什么不声明为箭头函数？类似：

const saveCredit = () => { //Your code }

Answer 2

如果您的按钮负责提交某个表单，则不需要onClick事件处理程序。您应该将type="submit"添加到button，将onSubmit添加到form标记本身。

您应该采用这种方法来正确处理提交(包括用户点击按钮或点击回车键(。