javascript - Reactjs 在单击按钮时多次触发 AJAX 调用(每次单击只需要 1 次!)

Question

我有一个简单的 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 .

感谢您提供的任何帮助。

Answer 1

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