Reactjs多次触发AJAX调用，一个按钮被点击(每次点击只想要一个！)
我有一个简单的反应应用程序，其中有一个表单，并在用户点击提交，张贴表单到服务器。很简单。
但是React会连续多次(通常是4-5次)触发AJAX调用，造成各种问题。我不知道为什么-我假设它与React的生命周期有关，但我不确定。
我使用axios作为AJAX库，所以问题可能出在这个库上(我不这么认为)。
下面是触发代码的方法：
submitEvent(event) {
event.preventDefault();
const apiQueryString = `api/event?${qs.stringify(this.state)}`;
if (this.state.event_title === undefined) {
alert('Event title is required!');
} else {
axios.post(apiQueryString)
.then((result) => {
this.state.id = result.data[0];
store.dispatch({
type: 'ADD_SINGLE_EVENT',
event: this.state,
});
alert('Success creating event!');
this.setState({}); // clear out old values
browserHistory.push('/');
})
.catch((error) => {
console.log(error);
alert('Error with database! See console for output.');
});
}这就是触发这个函数的按钮：
<button onClick={this.submitEvent} className="btn btn-primary">Submit</button>
感谢你能提供的任何帮助。
回答 3
Stack Overflow用户
发布于 2017-02-07 08:29:31
问题出在中间件上。在后端处理此AJAX请求的方法中，req.getValidationResult()的成功回调会将一个新项插入到数据库中。此成功回调被调用了两次，导致多次数据库插入。
Stack Overflow用户
发布于 2017-02-07 08:36:12
我会将提交从按钮移动到表单。表单中的任何按钮都将触发表单在单击时提交，除非该按钮具有type=button属性。在您的示例中，单击按钮将导致表单提交，然后表单将向当前页面提交一个表单GET请求。
您的submitEvent方法已经阻止了默认事件，这应该会阻止本机表单提交的发生。
<form onSubmit={submitEvent}>
// this button is inside form so clicking it will trigger form submit
<button className="btn btn-primary">Submit</button>
</form>Stack Overflow用户
发布于 2017-02-07 08:43:06
如果您的表单中只有一个按钮，并且您没有指定它的类型( button / submit )，那么默认情况下它将是一个submit按钮。所以在这里最好使用onSubmit而不是onClick。
https://stackoverflow.com/questions/42079549
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号