React-stripe-checkout中onToken无法访问state或传递参数的问题

这个问题本质是函数的this指向没有正确绑定到组件实例，所以在onToken里访问this.state会返回undefined，下面给你三种简单可行的解决办法：

方法1：用箭头函数定义onToken #

箭头函数会自动捕获当前上下文的this，直接替换原函数写法即可：

// 直接用箭头函数定义，无需额外绑定
const onToken = async (token) => {
    console.log(this.state); // 现在能正常访问组件state了
    console.log('Stripe Token: ', token);
    var result = await API.post("videos", "videos/offer/"+this.state.videoid, {
        body: {'price': this.state.pricePerMin, 'token': token}
    });
}

方法2：在构造函数中绑定this #

如果你的组件是类组件，可以在constructor里手动把onToken的this绑定到组件实例：

constructor(props) {
    super(props);
    this.state = {
        videoid: '',
        pricePerMin: '',
        // ...你的其他state字段
    };
    // 关键：绑定this到组件实例
    this.onToken = this.onToken.bind(this);
}

async onToken(token){
    console.log(this.state); // 现在可以正常访问了
    console.log('Stripe Token: ', token);
    var result = await API.post("videos", "videos/offer/"+this.state.videoid, {
        body: {'price': this.state.pricePerMin, 'token': token}
    });
}

方法3：在传递token属性时用箭头函数包裹 #

直接在StripeCheckout组件的token属性里，用箭头函数包裹你的onToken调用，强制绑定当前组件的this：

<StripeCheckout
    stripeKey=""
    name=""
    // 用箭头函数包裹，确保this指向组件实例
    token={(token) => this.onToken(token)}
    label={'Pay ' + this.state.price + '€ and start video analysis'}
    description={this.state.price+'€ (' + this.state.minutesToPay + ' x ' + this.state.pricePerMin + '€)'}
    amount={10 * 100} // 分
    currency="EUR"
    locale="de"
    shippingAddress={false}
    billingAddress={true}
    zipCode={true}
    alipay={false}
    bitcoin={false}
    allowRememberMe
/>

这三种方法任选其一都能解决问题，个人推荐第一种箭头函数的写法，代码更简洁，也是现在React开发的主流写法。

内容的提问来源于stack exchange，提问作者Alex