Ruby on rails 条纹和刺激给予'；无法读取属性'；条纹'；未定义的'；

我试图让Stripe在Rails环境中使用刺激控制器工作。当我按照指示使用签出时，它工作得非常好。当我使用（我认为！）相同代码的刺激时，控制台中出现以下错误：

Error: TypeError: Cannot read property 'stripe' of undefined
at payment_controller.js:28

这似乎是以下代码行：

return this.stripe.redirectToCheckout({ sessionId: session.id });

以下是刺激代码的完整列表：

import { Controller } from "stimulus"

export default class extends Controller {

    connect() {
        console.log("I am loaded")
        let stripeMeta = document.querySelector('meta[name="stripe-key"]')
        if (stripeMeta === null) { return }

        let stripeKey = stripeMeta.getAttribute("content")
        this.stripe = Stripe(stripeKey)
        this.csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    }

    loadstripe() {
        fetch('/create-checkout-session', {
            method: 'POST',
            headers: {
                'X-CSRF-Token': this.csrf,
            },
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(session) {
            console.log(session.id)
            console.log(this.stripe)
            return this.stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function(result) {
            // If `redirectToCheckout` fails due to a browser or network
            // error, you should display the localized error message to your
            // customer using `error.message`.
            if (result.error) {
                alert(result.error.message);
            }
        })
        .catch(function(error) {
            console.error('Error:', error);
        });
    }
}

这似乎与：

    <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripeKey = document.querySelector('meta[name="stripe-key"]').getAttribute("content")
    var stripe = Stripe(stripeKey);
    var checkoutButton = document.getElementById('checkout-button');

    checkoutButton.addEventListener('click', function() {
        // Create a new Checkout Session using the server-side endpoint you
        // created in step 3.
        fetch('/create-checkout-session', {
            method: 'POST',
            headers: {
                'X-CSRF-Token': document.querySelector("meta[name='csrf-token']").getAttribute("content"),
            },
        })
            .then(function(response) {
                return response.json();
            })
            .then(function(session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(function(result) {
                // If `redirectToCheckout` fails due to a browser or network
                // error, you should display the localized error message to your
                // customer using `error.message`.
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function(error) {
                console.error('Error:', error);
            });
    });
</script>

---

提前感谢您提供的任何帮助

非常感谢“刺激”对话中的某个人提供了以下建议：

这看起来是JS的一个范围问题，而不是特定于刺激。错误是告诉您，

此

未定义，这是因为该代码在一个回调函数中执行，该函数更改了范围-它不再在刺激控制器的范围内执行

一个非常简单的修复方法是更新loadStripe，如下所示：

loadStripe() {
  const stripe = this.stripe
  // ... etc.
}

---

并更新函数以访问该本地常量，而不是此常量。您的函数将能够访问本地const，您应该是golden。

非常感谢在刺激讨论中有人提供了以下建议：

这看起来是JS的一个范围问题，而不是特定于刺激。错误是告诉您，

此

未定义，这是因为该代码在一个回调函数中执行，该函数更改了范围-它不再在刺激控制器的范围内执行

一个非常简单的修复方法是更新loadStripe，如下所示：

loadStripe() {
  const stripe = this.stripe
  // ... etc.
}

---

并更新函数以访问该本地常量，而不是此常量。你的函数将能够访问本地常量，你应该是金色的。

控制台.log（this.stripe）的输出是什么？@PaulAsjes:完全相同，

错误：类型错误：无法读取未定义的支付控制器的属性“stripe”\u controller.js:28

。如果我将行移到

loadstripe

函数中，它会工作，但我不明白为什么。该

console.log（this.stripe）

的输出是什么？@PaulAsjes:完全相同，

错误：TypeError:无法读取未定义的支付控制器的属性“stripe”\u controller.js:28

。如果我将行移动到

loadstripe

函数中，它会工作，但我不明白为什么。