React中如何避免Stripe CardNumberElement在状态更新时重置？

我在React组件中使用Stripe Elements创建支付方式，但调用setIsSaving更新状态时，CardNumberElement的值会被重置，还出现错误：

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

希望更新isSaving状态时，卡片输入元素能保留用户输入的值，简化代码如下：

import React, { useState } from "react";
import {
  useStripe,
  useElements,
  CardNumberElement,
  CardCvcElement,
  CardExpiryElement
} from "@stripe/react-stripe-js";

export default function App() {
  const [isSaving, setIsSaving] = useState(false);
  const stripe = useStripe();
  const elements = useElements();

  const handleSave = async () => {
    setIsSaving(true);
    // 创建支付方式
    const cardElement = elements.getElement(CardNumberElement);
    const result = await stripe.createPaymentMethod({
      type: "card",
      card: cardElement,
      billing_details: {
        name: "Joe Doe"
      }
    });

    // 其他代码
  };
  
  return (
    <div className="App">
      <form onSubmit={handleSave}>
        <div>请输入卡号</div>
        <CardNumberElement />
        <div>有效期</div>
        <CardExpiryElement />
        <div>CVC码</div>
        <CardCvcElement />
        <button type="submit">{isSaving ? "加载中" : "保存"}</button>
      </form>
    </div>
  );
}

解决方法 #

1. 阻止表单默认提交行为 #

表单默认提交会触发页面刷新，导致Stripe Elements重新挂载、丢失输入值。在handleSave开头添加阻止逻辑：

const handleSave = async (event) => {
  event.preventDefault(); // 阻止默认表单提交
  setIsSaving(true);
  // 后续代码...
};

2. 检查Stripe与Elements就绪状态 #

组件初始化阶段stripe和elements可能未加载完成，调用API前先做校验：

const handleSave = async (event) => {
  event.preventDefault();
  setIsSaving(true);

  // 校验Stripe服务是否就绪
  if (!stripe || !elements) {
    return;
  }

  const cardElement = elements.getElement(CardNumberElement);
  const result = await stripe.createPaymentMethod({
    type: "card",
    card: cardElement,
    billing_details: {
      name: "Joe Doe"
    }
  });

  // 处理完支付逻辑后重置状态
  setIsSaving(false);
};

3. 确保StripeProvider正确包裹组件 #

Stripe Elements必须在Elements组件（由StripeProvider衍生）的上下文环境中工作，检查根组件配置：

// 根组件示例
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import App from "./App";

// 替换为你的Stripe公钥
const stripePromise = loadStripe("pk_test_xxxxxx");

function Root() {
  return (
    <Elements stripe={stripePromise}>
      <App />
    </Elements>
  );
}

export default Root;

4. 避免不必要的组件重渲染 #

如果支付组件存在无意义的重渲染，可能导致Elements重新挂载。可使用React.memo包裹组件，或排查其他状态变化触发的重渲染逻辑。

内容的提问来源于stack exchange，提问作者nika