我在一个视图中使用来自 @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：我们无法从指定的元素中检索数据。请确保您尝试使用的元素仍处于挂载状态。
我知道那是什么错误，但我需要通过不同的视图传递卡片信息。
遇到了完全相同的问题，似乎没有什么可以作为“正确”的解决方案，所以就开始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 可以解决这个问题。