Stripe useStripe() 和 useElements() 均为 null 并且元素不渲染

Question

我无法渲染，并且 useStripe() 和 useElements() 在我的付款表单中都有 null 值。我相信这个问题是由条纹承诺引起的，它没有解决，但我不知道为什么会发生这种情况或如何解决它。

条纹容器：

interface SubPlanPaymentPageProps {
  subscription: Subscription | null;
}
const PUBLIC_TEST_KEY = 'XXXXXXXXX';

const stripePromise = loadStripe(PUBLIC_TEST_KEY);

const SubPlanPaymentPage: React.FC<SubPlanPaymentPageProps> = ({subscription}) => {
  const [clientSecret, setClientSecret] = useState('');

  const options = {
    clientSecret,
  };

  useEffect(() => {
    fetch("http://localhost:3000/payment/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({subscription}),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  
  }, []);

  return (
    <div>
      {clientSecret && (
        <Elements stripe={stripePromise} options={options}>
          <StripePaymentForm />
          <button onClick={()=> console.log(stripePromise)}>secret</button>
          // this logs: Promise {<pending>}
        </Elements>
      )
     }
    </div>
  );
};

付款方式：

export default function StripePaymentForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubcribe = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
   
    if (!stripe || !elements) {
       // this right here logs: stripe: null, elements: null
      console.log('stripe:', stripe, 'elements:', elements);
      return;
    }

    console.log('stripe:', stripe, 'elements:', elements);

    const cardElement = elements.getElement(CardElement);
    if (!cardElement) {
      return;
    }

    const { paymentMethod, error } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: 'John Doe',
      },
    });

    if (error) {
      console.error('error:', error);
    } else {
      console.log(paymentMethod);
    }
  };

  return (
    <div className='payment-form-container'>
      <form onSubmit={handleSubcribe}>
        <div className='row'>
          <CardElement /> // this does not render
        </div>
        <button>Subscribe</button>
      </form>
    </div>
  );
}

我尝试使用 useEffect() 初始化条纹，但这不起作用。

useEffect(()=> {
  const initStripe = async () => {
      const stripeInstance = await loadStripe('your-publishable-key');
      setStripePromise(stripeInstance)
  }
  initStripe();
},[])

Answer 1

如果您使用react-router，可能的解决方案：

我延迟加载父组件（其中调用

loadStripe

）。改成直接导入后，就成功了。

我相信

useStripe

和

useElements

都是 null 的原因，至少在我的情况下，是因为

loadStripe

会无限期地挂起，永远不会解析或出错，因此

<Elements>

上下文永远不会加载。