如何避免支付成功后页面重载时重复发送后端请求？

支付完成后用户会被重定向到PaymentStatus组件，当前代码在支付成功时会调用sendRequest向后端发送请求，但重载页面时，组件会重新执行并再次触发succeeded分支，导致请求重复发送。

你尝试的两种方案存在的问题：

• 将window.location.search作为useEffect依赖：重载时无法正确重置message为success，导致成功组件无法渲染
• 查询服务器确认请求是否存在：客户端侧处理更高效，该方案冗余度高

客户端侧解决方案：用本地存储标记已处理的支付意图 #

每个Stripe支付意图（paymentIntent）都有唯一的id，我们可以用浏览器的localStorage或sessionStorage记录已经处理过的支付意图ID，避免重复执行请求：

修改PaymentStatus组件的逻辑：

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState<string | null>(null);

  const {data: sendRequest} = useGlobalAxios("post", "request"); //custom hook to send req 

  useEffect(() => {
    if (!stripe) {
      return;
    }

    const clientSecret: any = new URLSearchParams(window.location.search).get(
      "payment_intent_client_secret"
    );

    if (!clientSecret) {
      return;
    }

    stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
      switch (paymentIntent?.status) {
        case "succeeded":
          // 获取已处理的支付意图ID
          const processedIntentId = localStorage.getItem('processed_payment_intent');
          // 只有当前支付意图未处理过时，才发送请求
          if (processedIntentId !== paymentIntent.id) {
            sendRequest("request", request);
            // 标记该支付意图已处理
            localStorage.setItem('processed_payment_intent', paymentIntent.id);
          }
          // 无论是否重复，都设置message显示成功组件
          setMessage("success");
          break;
        // 处理其他状态...
        default:
          setMessage("failed");
          break;
      }
    });
  }, [stripe]);

  return <> {message == "success" ? <Success message={message} /> : null} </>;
}

方案说明 #

• 存储选择：
  • 用localStorage：即使关闭浏览器后重新打开，仍能记住已处理的支付意图，避免重复请求
  • 用sessionStorage：仅在当前浏览器会话内有效，关闭浏览器后标记会清除，适合不需要长期记忆的场景
• 优势：完全在客户端处理，无需额外后端请求，轻量高效
• 注意点：如果用户手动清除浏览器存储，可能会再次触发请求，但这属于极端场景，对大部分业务场景影响可忽略

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