使用 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

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

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>
    )
  }
}

使用 SetState 进行异步等待...我这样做对吗？

Async Await with SetState... am I doing this right?

javascript

async-await

reactjs

react-native

asynchronous-javascript