只能创建一个 cardNumber 类型的元素

IT技术 node.js reactjs stripe-payments
2021-05-04 14:29:13

我正在尝试显示我的条带组件，但出现此错误：

IntegrationError：只能创建一个 cardNumber 类型的元素。

我不知道为什么，因为我只在我的整个应用程序中使用它一次

有任何想法吗？

这是我的索引

import ReactDOM from 'react-dom';
import App from './App';

import * as serviceWorker from './serviceWorker';
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import MyComponent from './components/StripeComponent';


const promise = loadStripe("xxx-xxx-xxx");
ReactDOM.render(
  <React.StrictMode>
      <Elements stripe={promise}>
        <MyComponent/>
      </Elements>
  </React.StrictMode>,
  document.getElementById('root')
);

这是我的组件

import React from "react";
import {
  useElements,
} from "@stripe/react-stripe-js";

const MyComponent: React.FC= (props)=>{

  const elements = useElements();


 
    const cardNumberElement = elements?.create('cardNumber', {
      placeholder: ''
    });
    const cardExpiryElement = elements?.create('cardExpiry', {
      placeholder: ''
    });
    const cardCvvElement = elements?.create('cardCvc', {
      placeholder: ''
    });
    
    cardNumberElement?.mount('#card-number-element')
    cardExpiryElement?.mount('#card-expiry-element')
    cardCvvElement?.mount('#card-cvv-element')

 


  const handleSubmit = async (ev: any) => {
    ev.preventDefault();
    

  };
  return (
    <form id="payment-form" onSubmit={handleSubmit}>
      <div id="card-number-element"></div>
      <div id="card-expiry-element"></div>
      <div id="card-cvv-element"></div>
    </form>

  );
}

export default MyComponent
3个回答

似乎是因为您在功能组件主体中创建并安装了卡组件，它们在组件的每次渲染时都会执行，即作为无意的副作用。

将创建和挂载逻辑放在一个useEffect带有空依赖数组的钩子中，以便在组件挂载时只调用一次。

import React, { useEffect } from "react";
import { useElements } from "@stripe/react-stripe-js";

const MyComponent: React.FC = (props) => {
  const elements = useElements();

  // Effect hook to run once on component mount
  useEffect(() => {
    const cardNumberElement = elements?.create("cardNumber", {
      placeholder: ""
    });
    const cardExpiryElement = elements?.create("cardExpiry", {
      placeholder: ""
    });
    const cardCvvElement = elements?.create("cardCvc", {
      placeholder: ""
    });

    cardNumberElement?.mount("#card-number-element");
    cardExpiryElement?.mount("#card-expiry-element");
    cardCvvElement?.mount("#card-cvv-element");
  }, []); // <-- empty dependency array

  const handleSubmit = async (ev: any) => {
    ev.preventDefault();
  };

  return (
    <form id="payment-form" onSubmit={handleSubmit}>
      <div id="card-number-element"></div>
      <div id="card-expiry-element"></div>
      <div id="card-cvv-element"></div>
    </form>
  );
};

我遇到了同样的问题，就我而言，我在代码的另一部分引用了 CardNumberElement。删除后，一切正常。

useEffect(() => {
  if (elements) {
    const cardNumberElement =
      elements.getElement("cardNumber") || // check if we already created element
      elements.create("cardNumber", defaultInputStyles); // create if dont

    cardNumberElement.mount("#numberInput");
  }
}, [elements]);
其它你可能感兴趣的问题
上一篇各种3D打印灯丝的导热系数是多少？ 下一篇模型的 X/Y 床方向是否会影响打印细节质量？