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

我正在尝试显示我的条纹组件，但收到此错误：

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

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

将创建和安装逻辑放在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>
  );
};