如何在React组件外加载Stripe promise并使用Redux存储的公钥

解决方案 #

你可以通过useMemo缓存stripePromise实例，仅当Stripe公钥变更时才重新初始化，既符合动态获取公钥的需求，也能避免重复渲染问题：

import React, { useMemo } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { useSelector } from "react-redux";
import ExpressCheckout from "./ExpressCheckout";

const ExpressContainer = () => {
  const stripe_PK = useSelector(
    (state) => state.company.presenter.data_stripe_pk
  );

  // 仅当stripe_PK变化时才重新调用loadStripe生成新的promise实例
  const stripePromise = useMemo(() => {
    // 公钥未加载完成时返回空，避免调用loadStripe传入无效参数
    if (!stripe_PK) return null;
    return loadStripe(stripe_PK);
  }, [stripe_PK]);

  // 公钥加载中状态兜底
  if (!stripePromise) return <div>支付组件加载中...</div>;

  return (
    <Elements stripe={stripePromise}>
      <ExpressCheckout />
    </Elements>
  );
};

export default ExpressContainer;

实现说明 #

• 官方要求不要在渲染逻辑内重复调用loadStripe的核心是避免每次渲染都生成新的Stripe实例，useMemo加对应依赖的写法完全符合这个要求，不会出现重复初始化的问题
• 如果你需要在多组件复用这个Stripe实例，也可以在Redux获取到公钥的逻辑后，直接调用loadStripe将生成的promise存入Redux状态，后续所有组件直接从Redux取实例即可，不需要每个组件单独初始化

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