javascript - Async Await with SetState ...我这样做对吗？

Question

我正在尝试让用户添加一张卡片，如果它没有保存一张卡片，如果用户添加了一张卡片，请禁用该按钮并告诉它我将使用已保存的卡片。

通过tipsi-stripe获取token的方式是通过await。难道我做错了什么？也许我不完全理解这个概念？

export default class NewCardPage extends Component {
  constructor(props){
    super(props)
    this.state = {
      gotToken: false,
    };
  }

  render() {
    async function paymentRequestWithCardForm() {
      const options = {
        prefilledInformation: {
            email: 'jane.doe@outlook.com',
        },
      }
      try {
        const token = await stripe.paymentRequestWithCardForm(options)
        if (token){this.setState({ gotToken:true });} 
        else {this.setState({ gotToken:false });}
      }
      catch(err) {
        console.log(err.code)
        {this.setState({ gotToken:false });}
      }
    }

    return(
    <View style={styles.buttonContainer}>
      {this.state.gotToken === false ? <Button title='Add a Credit Card' style={styles.buttonStyle} onPress={() => { paymentRequestWithCardForm() }}></Button> : <Button disabled={true} title='Using saved credit card' style={styles.buttonStyle}></Button> }
    </View>
    )
  }
}

Answer 1

这是一种常见的模式，但是将函数定义为类属性会更有效（这样就不会在每次渲染时都创建它）：

export default class NewCardPage extends Component {
  state = {
      gotToken: false,
    }

  paymentRequestWithCardForm = aync() => {
      const options = {
        prefilledInformation: {
            email: 'jane.doe@outlook.com',
        },
      }
      try {
        const token = await stripe.paymentRequestWithCardForm(options)
        if (token){this.setState({ gotToken:true });} 
        else {this.setState({ gotToken:false });}
      }
      catch(err) {
        console.log(err.code)
        {this.setState({ gotToken:false });}
      }
    }

  render() {

    return(
    <View style={styles.buttonContainer}>
      {this.state.gotToken === false ? <Button title='Add a Credit Card' style={styles.buttonStyle} onPress={this.paymentRequestWithCardForm}></Button> : <Button disabled={true} title='Using saved credit card' style={styles.buttonStyle}></Button> }
    </View>
    )
  }
}