React中切换国家时loadStripe方法无法更新Stripe Element表单的问题咨询

这个问题我之前处理过，@stripe/react-stripe-js 的 <Elements> 组件确实会存在这种“复用旧实例”的情况——本质原因是 Stripe 实例一旦创建就和特定公钥绑定，而且 React 默认会复用相同组件类型的实例，除非你给它一个强制更新的信号。

下面是具体的修复方案，针对你的类组件场景：

1. 动态生成新的 Stripe 实例 Promise #

不要把 stripePromise 定义为组件外部的静态变量，而是将它存在组件的 state 里，每次切换国家时都重新调用 loadStripe() 生成新的 Promise。这样每个国家对应一个全新的 Stripe 实例。

2. 给 <Elements> 组件加唯一 Key #

通过给 <Elements> 添加基于选中国家的 key 属性，强制 React 在国家切换时卸载旧的 <Elements> 组件并挂载新的。这是确保 Stripe 表单完全重置的关键。

完整代码示例 #

import React from 'react';
import { Elements, injectStripe } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

// 你的CheckoutForm类组件，需要用injectStripe包裹来获取最新的Stripe实例
class CheckoutForm extends React.Component {
  // 这里可以用this.props.stripe和this.props.elements操作表单
  render() {
    return (
      {/* 你的Stripe Elements表单内容 */}
    );
  }
}

const InjectedCheckoutForm = injectStripe(CheckoutForm);

class CountryStripeSwitcher extends React.Component {
  state = {
    selectedCountry: '',
    stripePromise: null,
  };

  handleCountryChange = async (e) => {
    const selectedCountry = e.target.value;
    
    // 从后端获取对应国家的公钥
    const res = await fetch(`/api/stripe-public-key?country=${selectedCountry}`);
    const { public_key } = await res.json();

    // 更新state：生成新的Stripe Promise，同时记录选中的国家
    this.setState({
      selectedCountry,
      stripePromise: loadStripe(public_key),
    });
  };

  render() {
    const { selectedCountry, stripePromise } = this.state;

    return (
      <div>
        <select value={selectedCountry} onChange={this.handleCountryChange}>
          <option value="">选择国家</option>
          <option value="UK">英国</option>
          <option value="US">美国</option>
        </select>

        {/* 只有当stripePromise存在时才渲染Elements，并且用selectedCountry作为key */}
        {stripePromise && (
          <Elements key={selectedCountry} stripe={stripePromise}>
            <InjectedCheckoutForm ref={this.child} />
          </Elements>
        )}
      </div>
    );
  }
}

export default CountryStripeSwitcher;

为什么原来的方案不行？ #

• 你之前的 stripePromise 可能只初始化了一次，即使后续更新了公钥，旧的 Stripe 实例已经和初始公钥绑定，无法修改。
• React 会复用 <Elements> 组件实例，除非你通过 key 属性告诉它需要重新创建，所以单纯更新 stripe prop 可能无法触发内部的 Stripe 实例重置。

额外注意事项 #

• 确保你的 CheckoutForm 是通过 injectStripe 高阶组件包裹的（或者在函数组件中使用 useStripe/useElements 钩子），这样才能获取到最新的 Stripe 实例。
• 切换国家时，旧的 Stripe 表单会被自动清理，不需要手动处理。

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