请确保您尝试使用的元素仍处于挂载状态 [英] Please make sure the Element you are attempting to use is still mounted

问题描述

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

I use CardElement from @stripe/react-stripe-js for stripe in one view and I use confirmCardPayment in another view

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

如何从不同的视图传递卡片元素?我尝试将卡放入存储并从此处获取，但没有任何效果，并且出现下一个错误

How I can pass card element from different views? I've tried to put card to store and get it from here, but nothing works and I get next error

IntegrationError: 我们无法从指定的元素.请确保您尝试使用的元素仍处于挂载状态.

IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

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

I know what that's error mean, but I need to pass card info through the different views.

推荐答案

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

Had the exact same issue, nothing seemed to work as a "proper" solution, so then went with setTimeout implementation.
So I created a parent component where stripe instance is retrieved
const stripe = useStripe();
and whenever render of different view/component that is using CardElement changes, I used some delay (600ms).

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 可以解决这个问题.

Hope soon this solution wont be needed anymore and Stripe sort this thing out.

这篇关于请确保您尝试使用的元素仍处于挂载状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！