Question

未捕获（在承诺中）TypeError：无法读取未定义的属性（读取“id”）

2022-09-19

1756

javascript reactjs

const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        // paymentIntent = payment confirmation

        db
          .collection('users')
          .doc(user?.uid)
          .collection('orders')
          .doc(paymentIntent.id)
          .set({
              basket: basket,
              amount: paymentIntent.amount,
              created: paymentIntent.created
          })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history('/orders',{replace : true})
    })

}

出现此错误： 无法读取未定义的属性（读取“id”） 我认为由于此错误，我无法使用 Stripe 处理付款当我单击“立即购买”按钮时，它显示永远在处理，并弹出一个空白窗口。我正在使用 Stripe 接受付款。

Answer 1

不要在“then”回调中使用对象解构，并在回调中添加对参数的空检查。

像这样

const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then((paymentInfo) => {
        // paymentIntent = payment confirmation
        
        if (!paymentInfo) {
          return;
        }
        const { paymentIntent } = paymentInfo;

        db
          .collection('users')
          .doc(user?.uid)
          .collection('orders')
          .doc(paymentIntent.id)
          .set({
              basket: basket,
              amount: paymentIntent.amount,
              created: paymentIntent.created
          })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history('/orders',{replace : true})
    })

}

Answer 2

您还必须检查 id 是否为 null 和 undefined。与对 uid 所做的一样。代码更改 -

.doc(paymentIntent?.id)

const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        // paymentIntent = payment confirmation

        db
          .collection('users')
          .doc(user?.uid)
          .collection('orders')
          .doc(paymentIntent?.id)
          .set({
              basket: basket,
              amount: paymentIntent.amount,
              created: paymentIntent.created
          })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history('/orders',{replace : true})
    })

}