ajaxリクエストの成功関数からどのように反応関数を起動できますか？

Question

私はあなたが助けてくれることを願っています。 postPaymentHandler機能を実行します。

フォームはボタンがクリックされた提出した後、AJAXリクエストは、コールを取得します。フォームが検証され、ajaxリクエストが成功します。

成功関数が実行されると、this.paymentSuccessful（filteredCatalogue）; キャッチされない例外TypeError：関数は、次のエラーを起動this.paymentSuccessfulが

  submitFormHandler(e){ 
       e.preventDefault(); 
       var self = this; 
       $.ajax({ 
        type: 'POST', 
        url: 'components/charge.php', 
        data : { 
        stripeToken: token 
        }, 
        success: (data) => { 
        this.paymentSuccessful(filteredCatalogue); //This code fires an error in the console. 
        }, 
        error: function(data,textStatus) { 
        console.log("Ajax Error!"); 
        } 
       });//$.ajax 
       }; 

    //PaymentSuccessful function in root level scope of component. 
    paymentSuccessful(){ 
    this.props.postPaymentHandler(filteredCatalogue); 
    }; 

私はこのように機能がself.props.postPaymentHandlerを読み取るに自己変数を代入しようとした機能ではない（filteredCatalogue） ;。運がない。

ご迷惑をおかけして申し訳ありません。 おかげ 萌え

Answer 1

私はあなたのエラーが、このため範囲だと思いますが、成功機能に属します。あなたが本当にpaymentSuccessfulを実行したい場合は、いくつかのオプションがあります。

1）を割り当てpaymentSuccessful変数で成功範囲外で、実行できるようにします。

2）AJAX関数呼び出しをバインドするようにしてください。 @Codesとタグに

Answer 2

おかげで私はそれを動作させることができました。

外部可変成功関数の範囲としてpaymentSuccessful機能を設定することにより、機能は、意図小道具を参照することができます。

このヘルパーが含まれる必要があります。これは、をに割り当てることを意味します。

するvar自己=この;私はが仕事がcomponentDidMount関数内で変数を設定していなかったことを、試してみました

何か。

 submitFormHandler(e){ 

      var self = this; 
      e.preventDefault(); 
      var self = this; 
      var paymentSuccessful = function(){ 
      self.props.postPaymentHandler(); 
      }; 

      $.ajax({ 
       type: 'POST', 
       url: 'components/charge.php', 
       data : { 
       stripeToken: token 
       }, 
       success: (data) => { 
       paymentSuccessful(); //This function works as expected 
       }, 
       error: function(data,textStatus) { 
       console.log("Ajax Error!"); 
       } 
      });//$.ajax 
      };