请确保您尝试使用的元素仍然已安装答案

【问题标题】：Please make sure the Element you are attempting to use is still mounted请确保您尝试使用的元素仍然已安装
【发布时间】：2021-07-07 07:32:23
【问题描述】：

我在一个视图中使用来自 @stripe/react-stripe-js 的 CardElement 作为条带，我在另一个视图中使用 confirmCardPayment

const card = useSelector(state => state.someObject.cardElement)
const result = await stripe.confirmCardPayment(secret.data, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Some name',
        },
      }
    });

如何从不同的视图传递卡片元素？我试图将卡存储并从这里获取，但没有任何效果，我得到下一个错误

IntegrationError：我们无法从指定的检索数据元素。请确保您尝试使用的元素仍处于挂载状态。

我知道错误的含义，但我需要通过不同的视图传递卡信息。

【问题讨论】：

你能分享一下如何设置两个视图的完整代码吗？但是你不能在只定义在不同组件中的元素上调用confirmCardPayment，它们都必须在同一个组件中。

标签： reactjs redux stripe-payments

【解决方案1】：

有完全相同的问题，似乎没有什么可以作为“正确”的解决方案，所以然后使用setTimeout 实现。
所以我创建了一个父组件，用于检索条带实例
const stripe = useStripe();
并且每当使用 CardElement 的不同视图/组件的渲染发生变化时，我都会使用一些延迟（600 毫秒）。

let currentComponentToRender;
const [currentComponentToRender, setCurrentComponentToRender] = useState<JSX.Element>(<ComponentA />);

setTimeout(() => {
  switch (planOption) {
    case PaymentPlan.FREE:
      setCurrentComponentToRender(<ComponentA />);
      break;

    case PaymentPlan.PROFESSIONAL:
      setCurrentComponentToRender(<ComponentB />);
      break;
  }
}, 600);

希望很快不再需要这个解决方案，Stripe 会解决这个问题。

【讨论】：