如何使用useState创建Stripe BillingDetails类实例

错误原因 #

BillingDetails是Stripe React Native提供的TypeScript类型定义，不是可实例化的类，无法通过new BillingDetails()创建实例，这就是触发"Cannot read prototype of undefined"错误的原因。

正确实现方式 #

直接用普通JavaScript对象维护账单信息状态，同时借助BillingDetails做类型约束即可，React状态管理仅需处理普通对象。

完整代码示例

import { CardField, useConfirmPayment, useStripe, BillingDetails } from '@stripe/stripe-react-native';
import { useState } from 'react';
import { TextInput } from 'react-native';

// 初始化符合BillingDetails结构的状态对象
const [billingDetails, setBillingDetails] = useState<BillingDetails>({
  name: '',
  email: '',
  phone: '',
  address: {
    city: '',
    country: '',
    line1: '',
    line2: '',
    postal_code: '',
    state: ''
  }
});

// 姓名输入框示例
<TextInput
  placeholder="Name"
  value={billingDetails.name}
  onChangeText={(name) =>
    setBillingDetails((prevDetails) => ({ ...prevDetails, name }))
  }
/>

// 支付调用时直接传入状态对象
const { confirmPayment } = useConfirmPayment();
const handlePayment = async () => {
  try {
    await confirmPayment({
      // 其他必要支付参数
      billingDetails: billingDetails
    });
  } catch (error) {
    // 错误处理逻辑
  }
};

关键说明 #

• BillingDetails仅用于TypeScript类型校验，确保你的状态对象符合Stripe要求的账单结构，无需实例化。
• 使用对象展开运算符...prevDetails更新状态，保证状态不可变性，符合React状态管理规范。

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