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

【问题标题】：Only one element of type cardNumber can be created只能创建一个 cardNumber 类型的元素
【发布时间】：2020-12-17 19:18:07
【问题描述】：

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

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

【问题讨论】：

标签： node.js reactjs stripe-payments

【解决方案1】：

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

将创建和挂载逻辑放在具有空依赖数组的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>
  );
};

【讨论】：

非常感谢，代码有效，我明白了问题发生在我身上的原因
我在useEffect 中使用启动，但无论如何都有同样的问题。会不会是因为我的表单是在 Class 组件中使用的？
@David React 钩子与基于类的组件不兼容，但也许我误解了。如果您在这里通过Minimal, Complete, and Reproducible Example 提出一个新问题并澄清详细信息，请随时（在）我这里提供一个链接，我可以看看。
这不是一个新问题。我的意思是我的表单组件与这个问题非常相似。它存储在 ClassComponent 中。每次我用这个表单打开页面时，我都会出错
@David 不用担心。你能分享一个codesandbox或git repo的链接，这样我就可以看到你正在运行的代码吗？我只需要更多的上下文。我倾向于说您应该提出一个新问题，如果结果证明它是重复的，那没关系，我们可以将其标记为重复并关闭它。如果它不是重复的，并且您的代码存在特定问题，那么您将得到更多的关注，并希望更快地解决它。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：