React页面加载时Stripe支付意图重复创建问题求助

核心原因：React严格模式的开发环境特性 #

在React 18的开发环境中，<React.StrictMode>会重复执行副作用函数（包括useEffect）两次，这是框架的刻意设计，用来帮你排查潜在的副作用问题（比如未清理的订阅、非幂等的API调用）。你的useEffect依赖是空数组，会在组件挂载时执行，所以开发环境下Strict Mode会触发两次请求，直接导致创建两个支付意图。

你可以检查项目入口文件（比如src/index.tsx或src/main.tsx），如果代码被<React.StrictMode>包裹，就会出现这个情况：

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

具体解决方法 #

1. 把后端API改成幂等（推荐方案） #

无论是否开启Strict Mode，生产环境都可能出现重复请求（比如网络重试），所以API必须设计成幂等的——重复调用不会创建重复资源。

你可以在请求时传递一个唯一标识作为幂等键（比如用户ID+订单ID的组合），后端接收到请求后，先检查是否已存在对应支付意图，存在则直接返回已有的client_secret，不存在再创建新的。

前端请求可以这样修改：

const [clientSecret, setClientSecret] = useState<string>();

useEffect(()=>{
  // 假设你有用户ID和订单ID作为唯一标识
  const idempotencyKey = `${userId}_${orderId}`;
  
  fetch(`${BASE_URL}/payment/create_stripe_intent`,{
    method:"POST",
    headers: {
      'Content-Type': 'application/json',
      'Idempotency-Key': idempotencyKey // 自定义幂等请求头，后端对应处理
    },
    body: JSON.stringify({ payment_amount, idempotencyKey }),
  })
  .then(async(response)=>{
    const data = await response.json();
    setClientSecret(data.result.client_secret)
  })
},[userId, orderId]);

2. 开发环境临时关闭Strict Mode（仅用于调试） #

如果只是想在开发时避免重复请求，可以暂时移除<React.StrictMode>的包裹，但这会丢失Strict Mode提供的错误检测能力，不建议长期使用。

3. 检查组件是否被重复挂载 #

如果你的组件被父组件多次渲染（比如路由配置重复声明、父组件中多次调用该组件），也会导致组件多次挂载，useEffect执行多次。检查组件的使用场景，确保只被渲染一次。

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