Question

我有一个父组件，它与其他一些子组件一起呈现一个名为PaymentForm的子组件。

我正在通过类似的道路向孩子传递一个名为paymentSucceeded的回调函数：

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

PaymentForm然后使用Stripe API执行信用卡交易，成功完成后应调用回调paymentSucceeded。但是，在付款成功执行时，this.props的{{1}}为PaymentForm，我不知道原因。

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)对象以及函数props，但是第二个日志paymentSucceeded为道具打印(2)。因此，我收到错误消息：

TypeError：无法读取undefined
的属性paymentSucceeded

Answer 1

我最终通过将render的{{1}}方法更改为以下内容来解决此问题：

PaymentForm

为什么我的子组件在API调用返回后丢失其props

1 个答案: