未处理的拒绝（错误）：无效的钩子调用 React Stripe Fpx

Question

在 ReactJS 上提交我的 FpxBank 元素时遇到问题。

提交paymentFpx时显示此错误

这是我的 FpxBank 元素组件

Fpx.Js

import React, {useEffect} from 'react';
import {withRouter, useLocation} from 'react-router-dom';
import {FpxBankElement, Elements, useStripe, useElements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';



const stripePromise = loadStripe("pk_test_rgWMA3zxjAtwaB6iV8b5W40x");

const FpxForm = () => {
  return (
    <Elements stripe={stripePromise}>
        <FpxBankElement options={{accountHolderType: 'individual'}} />
    </Elements>
  );
};


export default FpxForm;

这是我的购物车页面：

        else if(this.props.productInput.payment_method == 'fpx'){
            const stripe = useStripe();
            const elements = useElements();
            const result = await stripe.confirmFpxPayment('pk_test_rgWMA3zxjAtwaB6iV8sb5W40x', {
                payment_method: {
                  fpx: elements.getElement(FpxBankElement)  ,
                },
                // Return URL where the customer should be redirected after the authorization
                return_url: `${window.location.href}`,
              });
            
              if (result.error) {
                // Inform the customer that there was an error.
                const errorElement = document.getElementById('error-message');
                errorElement.textContent = result.error.message;
              }
        }

有什么解决方案或帮助吗？