时间戳

首页 > 解决方案 > 请确保您尝试使用的元素仍然已安装

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

问题描述

我在一个视图中使用来自 @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：我们无法从指定的元素中检索数据。请确保您尝试使用的元素仍处于安装状态。

我知道那是什么错误的意思，但我需要通过不同的视图传递卡信息。

标签： reactjsreduxstripe-payments

解决方案

有完全相同的问题，似乎没有什么可以作为“正确”的解决方案，所以然后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 会解决这个问题。

推荐阅读