Question

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

但是React正在连续多次触发AJAX调用（通常是4-5），从而产生各种各样的问题。我不知道为什么 - 我认为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（）的成功回调中将新项目插入到数据库中。这个成功回调被调用两次，导致多个数据库插入。

Answer 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>

Answer 3

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

单击按钮多次激活AJAX调用的Reactjs（每次点击只需1次！）

3 个答案: