Stipe, React Native, [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]

Question

我正在使用 Expo、Firebase Cloud Function 和 Stripe 开发应用程序，出于某种原因，我第一次导航到屏幕时 CardPayment 代码 returns 错误：[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]，但如果我刷新屏幕，代码运行完美。任何人都知道为什么以及如何解决它？我尝试了很多东西，甚至使用了 axios，但似乎没有任何效果。

后端

exports.addCardForExistingCustomer = functions.https.onRequest(async (req, res) => {
  
    const ephemeralKey = await stripe.ephemeralKeys.create(
      {customer: `${req.query.customer}`},
      {apiVersion: '2020-08-27'}
    );
  
    const setupIntent = await stripe.setupIntents.create({
      customer: `${req.query.customer}`
    });

    const paymentMethods = await stripe.paymentMethods.list({
      customer: `${req.query.customer}`,
      type: 'card',
    });
    
    res.json({
      setupIntent: setupIntent.client_secret,
      ephemeralKey: ephemeralKey.secret,
      customer: `${req.query.customer}`,
      paymentMethods: paymentMethods,
    })
});

前端

    export default function CardPayment() {
    
      const { initPaymentSheet, presentPaymentSheet } = useStripe();
      const [loading, setLoading] = useState(false);
      const [customerId, setCustomerId] = useState('');
    
      const fetchPaymentSheetParams = async () => {
        const response = await fetch(`https://<<path>>.cloudfunctions.net/addCardForExistingCustomer?customer=${customerId}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const { setupIntent, ephemeralKey, customer } = await response.json();
    
        return {
          setupIntent,
          ephemeralKey,
          customer,
        };
      };
    
      const initializePaymentSheet = async () => {
        const {
          setupIntent,
          ephemeralKey,
          customer,
        } = await fetchPaymentSheetParams();
    
        console.log(setupIntent)
    
        const { error } = await initPaymentSheet({
          customerId: customer,
          customerEphemeralKeySecret: ephemeralKey,
          setupIntentClientSecret: setupIntent,
        });
        if (!error) {
          setLoading(true);
        } else {
          console.log(error)
        }
      };
    
    
      const openPaymentSheet = async () => {
    
        const { error } = await presentPaymentSheet();
    
        if (!error) {
          Alert.alert('Success', 'Your payment method is successfully set up for future payments!');
        }
      };
    
      const fetchCustomer = async () => {
       const fetchInformation = doc(db, 'clients', 'user', 'Information', auth.currentUser.uid)
       await getDoc(fetchInformation)
       .then((snapshot) => {
        const stripeId = snapshot.data().stripeCustomerId
        setCustomerId(stripeId)
        initializePaymentSheet();
      })
  }
    
      useEffect(() => {
        fetchCustomer()
      }, []);
      
      if (loading == false) {
        return (
          <View>
            <ActivityIndicator/>
          </View>
        )
      } else {
        return (
          <View>
            <CustomButton
              buttonTxt={'Add Credit/Debit Card'}
              txtColor={'white'}
              backgroundColor={'black'}
              onPress={openPaymentSheet}
            />
          </View>
        )
      }
    }

Answer 1

前端的

fetchCustomer 没有等待 getDoc 承诺链完成。尝试在调用 getDoc 之前放置 return 或 await。如果使用 return，发布的 fetchCustomer 不需要是 async 函数。

如果这解决了错误，我的猜测是某种响应缓存允许 getDoc(fetchInformation) 的 then 处理程序赢得在 promise 作业处理中设置的竞争条件（在微任务队列）当页面重新加载时。

getDoc 调用处理程序 (async (snapshot) => {...}) 在 initializePaymentSheet(); 调用之前缺少 await 运算符。如果 initializePaymentSheet 延迟，这可能会在微任务队列中再次设置不可预测的竞争条件。

Stipe, React Native, [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]

Stipe, React Native, [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]

javascript

node.js

json

react-native

google-cloud-functions