React环境下Stripe AddressElement onChange事件不触发问题

在localhost:3000的React开发环境中，使用react-stripe-js提供的AddressElement组件时遇到异常：首次渲染页面后，用户输入地址内容无法触发onChange事件；但在VS Code中修改代码（如添加空格）并保存触发热重载后，该事件能正常捕获用户输入的地址详情。

相关代码 #

import { useEffect, useState } from 'react';
import {useLocation, Link} from 'react-router-dom';
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "./CheckoutForm";
import {AddressElement} from '@stripe/react-stripe-js';
import { parseCartToObject } from '../helpers';

const Checkout = () => {
    const location = useLocation();

    const stripePromise = loadStripe('testkey-removed-for-this-post');
    const [clientSecret, setClientSecret] = useState("");

    useEffect(() => {
        // Create PaymentIntent as soon as the page loads
        fetch("http://localhost:4242/create-payment-intent", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ 
            amount:location.state.userCart.totalCost
          }),
        })
          .then((res) => res.json())
          .then((data) => {
            setClientSecret(data.clientSecret) 
          })
          .catch((err) => {
            console.log('error', err);
          })
      }, []);

    return(
        <div className='checkout'>
            <h1 className='checkout-heading'>checkout</h1>
            <p>total to pay £{location.state.userCart.totalCost}</p>
            <Link className='checkout-btn' to="/">back to basket</Link>
            {clientSecret && (
              <Elements 
              options={{appearance:{theme:'stripe'},clientSecret:clientSecret}} stripe={stripePromise}>
                    <AddressElement options={{mode: 'shipping'}} 
                    onChange={(event) => {  
                      console.log(event);
                      if (event.complete) {
                        const address = event.value
                        let finalCart = parseCartToObject();
                        finalCart.username = address.name;
                        finalCart.address = address.address;
                        localStorage.setItem('userCart',JSON.stringify(finalCart));
                        console.log('address and name added to cart'); 
                      }

                    }}
                    />
                    <CheckoutForm />
               </Elements>
            )}
        </div>
    )
};

export default Checkout;

1. 固定Stripe实例初始化位置 #

当前代码中stripePromise在组件内部声明，每次组件渲染都会重新调用loadStripe，这会导致Stripe实例重复初始化，破坏Elements组件的事件绑定稳定性。把stripePromise移到组件外部，确保只初始化一次：

// 移到组件外部，全局仅初始化一次
const stripePromise = loadStripe('testkey-removed-for-this-post');

const Checkout = () => {
    // 组件内部代码保持不变
};

2. 修正useEffect的依赖项 #

原useEffect的依赖数组为空，但内部使用了location.state.userCart.totalCost，这会导致React的依赖检查失效，可能引发渲染时序问题。更新依赖数组，确保fetch在totalCost变化时重新执行：

useEffect(() => {
    fetch("http://localhost:4242/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ 
        amount:location.state.userCart.totalCost
      }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret))
      .catch((err) => console.log('error', err));
}, [location.state.userCart.totalCost]); // 添加正确的依赖项

3. 缓存Elements配置选项 #

用useMemo缓存Elements的配置选项，避免clientSecret更新时不必要的组件重新渲染，确保AddressElement的事件绑定稳定：

import { useMemo } from 'react'; // 引入useMemo

const Checkout = () => {
    // ...其他代码

    const elementsOptions = useMemo(() => ({
        appearance: { theme: 'stripe' },
        clientSecret: clientSecret
    }), [clientSecret]);

    return(
        // ...其他代码
        {clientSecret && (
            <Elements options={elementsOptions} stripe={stripePromise}>
                {/* AddressElement和CheckoutForm */}
            </Elements>
        )}
    )
};

4. 同步Stripe依赖版本 #

确保@stripe/react-stripe-js和@stripe/stripe-js的版本完全一致，版本不匹配可能导致事件绑定异常。执行以下命令更新到最新兼容版本：

npm install @stripe/react-stripe-js@latest @stripe/stripe-js@latest

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