Reactjs 多次触发 AJAX 调用，单击一个按钮（每次单击只需要 1 个！）答案

【问题标题】：Reactjs firing AJAX call multiple times a button is clicked (only want 1 per click!)Reactjs 多次触发 AJAX 调用，单击一个按钮（每次单击只需要 1 个！）
【发布时间】：2017-02-07 00:09:13
【问题描述】：

我有一个简单的 React 应用程序，其中包含一个表单，当用户单击提交时，将表单发布到服务器。很简单。

但是 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>

整个文件的源代码是here，工作页面是here。

感谢您提供的任何帮助。

【问题讨论】：

尝试在表单中添加onSubmit 属性，例如：<form onSubmit={(e) => e.preventDefault()} 以防止标准表单行为。让我知道这是否适合您，我会将其添加为答案
注意：您应该始终明确指定按钮类型（提交或按钮），因为不同的浏览器具有不同的默认值...
@rauliyohmc 似乎不起作用。
如果删除highlighted code here会发生什么

标签： javascript ajax reactjs redux axios

【解决方案1】：

问题出在中间件上。在后端处理此 AJAX 请求的方法中，在 req.getValidationResult() 成功回调时将新项目插入到数据库中。这个成功回调被调用了两次，导致多次数据库插入。

【讨论】：

它实际上在我的数据库中创建了 6 个事件，所以也许它在后端？
好的，我提交了三遍。所以是的，它必须在你的后端。你在后端使用nodejs吗？如果是这样，如果您发布该代码，我可以帮助您。
这里是服务器文件：github.com/benrondeau/musician-cms-reactjs/blob/master/…
我认为 getValidationResult 一定是问题所在。似乎它触发了两次回调。不用它试试看能不能解决问题？
会的！谢谢

【解决方案2】：

我会将提交从按钮移至表单。表单中的任何按钮都会触发表单在点击时提交，除非该按钮具有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>

【讨论】：

【解决方案3】：

如果您的表单中只有一个按钮并且您没有指定它的类型（按钮/提交），默认情况下它将是一个提交按钮。所以这里最好使用 onSubmit 而不是 onClick。

【讨论】：