APIコールが返された後に子コンポーネントがその小道具を失うのはなぜですか？

Question

他の子と一緒にPaymentFormという子コンポーネントをレンダリングする親コンポーネントがあります。私はそうのような小道具を経由して子供にpaymentSucceededと呼ばれるコールバック関数を渡しています

：

// this is in the render method of the parent 
<PaymentForm 
    paymentSucceeded={() => { 
    this._postJob() 
}}/> 

PaymentFormは、クレジットカードのトランザクションを実行するためにストライプのAPIを使用して、正常に終了すれば、コールバックpaymentSucceededを呼び出す必要があります。ただし、お支払いが正常に実行された時点で、PaymentFormのthis.propsはundefinedとなり、私は理由を知りません。

export default class PaymentForm extends React.Component { 

    constructor(props) { 
    super(props) 
    console.log('PaymentForm - constructor - props: ', props) // (1) 
    } 

    _receiveCreditCardInfo(creditCardDetails) { 
    const creditCardInfo = {creditCardInfo: creditCardDetails} 
    console.log('PaymentForm - _receiveCreditCardInfo - props: ', this.props) // (2) 

    fetch(url, { 
     method: 'POST', 
     headers: new Headers({ 
     'Content-Type': 'application/json' 
     }), 
     body: JSON.stringify(creditCardInfo) 
    }).then((data) => { 
     this.props.paymentSucceeded() // this doesn't work bc this.props is undefined 
    }).catch((error) => { 
    }) 
    } 

    render() { 
    return (
     <StripeCheckout 
     token={this._receiveCreditCardInfo} 
     stripeKey={STRIPE_TEST_API_KEY} /> 
    ) 
    } 
} 

最初のログ(1)は正しく機能paymentSucceeded、しかし第二ログ(2)プリント小道具用undefinedと共にpropsオブジェクトを印刷します。したがって、私は、エラーメッセージが表示されます：

TypeError: Cannot read property paymentSucceeded of undefined

Answer 1

私は最終的には、以下にPaymentFormのrender方法を変更することで問題を解決：あなたはインスタンスに `_receiveCreditCardInfo`をバインドする代わりに宣言するとどうなる

return (
    <StripeCheckout 
    token={() => { this._receiveCreditCardInfo() }} 
    stripeKey={STRIPE_TEST_API_KEY} /> 
)