只能创建一个 cardNumber 类型的元素 [英] Only one element of type cardNumber can be created

问题描述

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

I am trying to display my stripe component, but I am getting this error:

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

IntegrationError: Only one element of type cardNumber can be created.

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

I don't know why, since I'm only using it once in my entire app

有什么想法吗?

这是我的索引

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

推荐答案

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

Seems it is because you create and mount the card components in the functional component body they are executed on every render of the component, i.e. as an inadvertent side-effect.

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

Place the creation and mounting logic in an useEffect hook with an empty dependency array so that it is invoked only once when the component mounts.

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>
  );
};

这篇关于只能创建一个 cardNumber 类型的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！