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

我使用 @stripe/react-stripe-js 中的 CardElement 在一个视图中进行条纹，然后使用确认卡付款从另一个角度来看

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

如何从不同视图传递卡片元素？我尝试将卡放入商店并从这里获取它，但没有任何效果，我收到下一个错误

集成错误：我们无法从指定的位置检索数据 元素。 请确保您尝试使用的元素仍然已安装。

我知道这个错误意味着什么，但我需要通过不同的视图传递卡片信息。

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