Javascript 未捕获的TypeError:paymentForm.requestCardNonce不是函数,未生成令牌

Javascript 未捕获的TypeError:paymentForm.requestCardNonce不是函数,未生成令牌,javascript,reactjs,payment,square-connect,square,Javascript,Reactjs,Payment,Square Connect,Square,未捕获的TypeError:paymentForm.requestCardNonce不是一个未生成的函数令牌。请发送任何建议或链接。实际上,我插入了Square Payment API,但它没有加载或出错。如果您有任何引用,请发送给我并显示const moviesRouteMatch=useRouteMatch/movies; const newsRouteMatch=useRouteMatch/news; const uploadRouteMatch=用户路由匹配/上传 const Payme

未捕获的TypeError:paymentForm.requestCardNonce不是一个未生成的函数令牌。请发送任何建议或链接。实际上,我插入了Square Payment API,但它没有加载或出错。如果您有任何引用,请发送给我并显示const moviesRouteMatch=useRouteMatch/movies; const newsRouteMatch=useRouteMatch/news; const uploadRouteMatch=用户路由匹配/上传

const PaymentForm = ({ paymentForm }) => {
  const [details, setDetails] = useState({
    cardBrand: '',
    nonce: undefined,
    googlePay: false,
    applePay: false,
    masterpass: false,
  });
  const requestCardNonce = () => {
    paymentForm.requestCardNonce();
  };
  useEffect(() => {
    const config = {
      applicationId: 'sandbox-sq0idb-5SScYBbnEFt3pv9JwVjeRw',
      locationId: 'LQTHZ296Y4X5N',
      inputClass: 'sq-input',
      autoBuild: false,
      inputStyles: [
        {
          fontSize: '16px',
          fontFamily: 'Helvetica Neue',
          padding: '16px',
          color: '#373F4A',
          backgroundColor: 'transparent',
          lineHeight: '1.15em',
          placeholderColor: '#000',
          _webkitFontSmoothing: 'antialiased',
          _mozOsxFontSmoothing: 'grayscale',
        },
      ],
      applePay: {
        elementId: 'sq-apple-pay',
      },
      masterpass: {
        elementId: 'sq-masterpass',
      },
      googlePay: {
        elementId: 'sq-google-pay',
      },
      cardNumber: {
        elementId: 'sq-card-number',
        placeholder: '• • • •  • • • •  • • • •  • • • •',
      },
      cvv: {
        elementId: 'sq-cvv',
        placeholder: 'CVV',
      },
      expirationDate: {
        elementId: 'sq-expiration-date',
        placeholder: 'MM/YY',
      },
      postalCode: {
        elementId: 'sq-postal-code',
        placeholder: 'Zip',
      },
      callbacks: {
        methodsSupported: (methods) => {
          if (methods.googlePay) {
            setDetails({
              ...details,
              googlePay: methods.googlePay,
            });
          }
          if (methods.applePay) {
            setDetails({
              ...details,
              applePay: methods.applePay,
            });
          }
          if (methods.masterpass) {
            setDetails({
              ...details,
              masterpass: methods.masterpass,
            });
          }
          return;
        },
        createPaymentRequest: () => {
          return {
            requestShippingAddress: false,
            requestBillingInfo: true,
            currencyCode: 'USD',
            countryCode: 'US',
            total: {
              label: 'MERCHANT NAME',
              amount: '100',
              pending: false,
            },
            lineItems: [
              {
                label: 'Subtotal',
                amount: '100',
                pending: false,
              },
            ],
          };
        },
        cardNonceResponseReceived: (errors, nonce, cardData) => {
          if (errors) {
            // Log errors from nonce generation to the Javascript console
            console.log('Encountered errors:');
            errors.forEach(function (error) {
              console.log('  ' + error.message);
            });
            return;
          }
          setDetails({
            ...details,
            nonce: nonce,
          });
        },
        unsupportedBrowserDetected: () => {},
        inputEventReceived: (inputEvent) => {
          switch (inputEvent.eventType) {
            case 'focusClassAdded':
              break;
            case 'focusClassRemoved':
              break;
            case 'errorClassAdded':
              document.getElementById('error').innerHTML =
                'Please fix card information errors before continuing.';
              break;
            case 'errorClassRemoved':
              document.getElementById('error').style.display = 'none';
              break;
            case 'cardBrandChanged':
              if (inputEvent.cardBrand !== 'unknown') {
                setDetails({
                  ...details,
                  cardBrand: inputEvent.cardBrand,
                });
              } else {
                setDetails({
                  ...details,
                  cardBrand: '',
                });
              }
              break;
            case 'postalCodeChanged':
              break;
            default:
              break;
          }
        },
        paymentFormLoaded: function () {
          document.getElementById('name').style.display = 'inline-flex';
        },
      },
    };
    paymentForm = new paymentForm(config);
    paymentForm.build();
  }, []);**
传递给paymentForm组件的paymentForm道具的值是多少?