Reactjs AJAX呼び出しを複数回呼び出す（1回のクリックで1回だけ！）

Question

私は簡単なReactアプリケーションを持っています。フォームにはフォームがあり、ユーザーがsubmitをクリックすると、フォームをサーバーに投稿します。十分に簡単です。

しかし、ReactはAJAXコールを複数回（通常は4〜5回）連続して実行しています。これにより、あらゆる種類の問題が発生します。なぜ私はそれがReactのライフサイクルを行う何かを持っていると仮定しますが、わかりません。

私はAJAXライブラリとしてAxiosを使用しているので、おそらく問題はそのライブラリです（私は思っていません）。ここで

は、コードを起動する方法です。

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（）のコールバックが成功したときに新しい項目がデータベースに挿入されていました。この成功コールバックは2回呼び出され、複数のデータベースが挿入されました。

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

フォームにボタンが1つしかなく、そのタイプ（ボタン/サブミット）を指定しない場合は、デフォルトで送信ボタンになります。 したがって、onClickの代わりにonSubmitを使用する方が良いです。