Stripe支付成功后，React组件如何向目标页面传递数据？

我是React新手，需要实现Stripe支付成功后，从包含支付按钮及redirectToCheckout方法的组件A，向/payment页面对应的组件B传递数据。相关代码如下：

const item = {
  price: "testt_stripe",
  quantity: 1
};

const checkoutOptions = {
  lineItems: [item],
  mode: "subscription",
  successUrl: `${window.location.origin}/payment`,
  cancelUrl: `${window.location.origin}/cancel`,
};

const redirectToCheckout = async () => {
  // Stripe checkout
  setLoading(true);

  const stripe = await getStripe();
  const { error } = await stripe.redirectToCheckout(checkoutOptions);

  if (error) setStripeError(error.message);
  setLoading(false);
};

<button onClick={redirectToCheckout}></button>

由于支付成功后是Stripe发起页面重定向，无法直接用React组件内部状态传递数据，下面是几种适合新手的跨页面传参方案：

1. URL查询参数传递 #

这是最直接的方式，修改successUrl拼接需要传递的数据：

// 组件A中修改checkoutOptions
const checkoutOptions = {
  lineItems: [item],
  mode: "subscription",
  // 拼接商品价格、数量等参数到成功页URL
  successUrl: `${window.location.origin}/payment?price=${item.price}&quantity=${item.quantity}`,
  cancelUrl: `${window.location.origin}/cancel`,
};

组件B（/payment页面）通过react-router-dom的useLocation钩子解析参数：

import { useLocation } from 'react-router-dom';

function PaymentPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  
  const price = queryParams.get('price');
  const quantity = queryParams.get('quantity');

  return (
    <div>
      <h1>支付成功</h1>
      <p>商品价格：{price}</p>
      <p>购买数量：{quantity}</p>
    </div>
  );
}

2. 本地存储（LocalStorage）传递 #

在组件A发起支付前将数据存入本地存储，组件B读取后清理：

// 组件A中修改redirectToCheckout方法
const redirectToCheckout = async () => {
  setLoading(true);
  
  // 将数据存入localStorage
  localStorage.setItem('paymentItem', JSON.stringify(item));

  const stripe = await getStripe();
  const { error } = await stripe.redirectToCheckout(checkoutOptions);

  if (error) setStripeError(error.message);
  setLoading(false);
};

组件B读取数据：

import { useState, useEffect } from 'react';

function PaymentPage() {
  const [paymentItem, setPaymentItem] = useState(null);

  useEffect(() => {
    const storedItem = localStorage.getItem('paymentItem');
    if (storedItem) {
      setPaymentItem(JSON.parse(storedItem));
      // 读取后删除数据，避免残留
      localStorage.removeItem('paymentItem');
    }
  }, []);

  if (!paymentItem) return <div>加载中...</div>;

  return (
    <div>
      <h1>支付成功</h1>
      <p>商品价格：{paymentItem.price}</p>
      <p>购买数量：{paymentItem.quantity}</p>
    </div>
  );
}

3. React Context全局状态传递 #

如果项目已使用全局状态管理，可通过Context传递数据：
首先创建Context文件：

// PaymentContext.js
import { createContext, useContext, useState } from 'react';

const PaymentContext = createContext();

export function PaymentProvider({ children }) {
  const [paymentData, setPaymentData] = useState(null);

  return (
    <PaymentContext.Provider value={{ paymentData, setPaymentData }}>
      {children}
    </PaymentContext.Provider>
  );
}

export function usePayment() {
  return useContext(PaymentContext);
}

在根组件中包裹PaymentProvider：

import { PaymentProvider } from './PaymentContext';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <PaymentProvider>
      <BrowserRouter>
        {/* 路由和其他组件 */}
      </BrowserRouter>
    </PaymentProvider>
  );
}

组件A中设置数据：

import { usePayment } from './PaymentContext';

function ComponentA() {
  const { setPaymentData } = usePayment();
  // ...其他代码

  const redirectToCheckout = async () => {
    setLoading(true);
    // 将数据存入Context
    setPaymentData(item);

    const stripe = await getStripe();
    const { error } = await stripe.redirectToCheckout(checkoutOptions);

    if (error) setStripeError(error.message);
    setLoading(false);
  };

  // ...其他代码
}

组件B中读取数据：

import { usePayment } from './PaymentContext';

function PaymentPage() {
  const { paymentData } = usePayment();

  if (!paymentData) return <div>加载中...</div>;

  return (
    <div>
      <h1>支付成功</h1>
      <p>商品价格：{paymentData.price}</p>
      <p>购买数量：{paymentData.quantity}</p>
    </div>
  );
}

• URL查询参数适合传递简单、非敏感数据，参数会暴露在地址栏
• 本地存储数据会留在浏览器中，读取后务必删除避免残留
• Context方式无需依赖浏览器存储，但要确保组件B能访问到Context

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