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函数调用。

Answer 2

感谢@Codes和Tags，我能够让它发挥作用。

通过将 paymentSuccessful 函数设置为变量外部成功函数的范围，该函数可以引用预期的prop。

需要包含此帮助程序。这意味着将 this 分配给变量。

var self = this;

我尝试过的，没有工作的是在 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
            };

如何从ajax请求成功函数中激活react函数？

2 个答案: