React中如何避免PayPal按钮重复渲染？

问题根源 #

你当前的代码同时混用了PayPal官方React组件库（@paypal/react-paypal-js）和原生JS SDK的调用方式，加上缺少组件卸载时的清理逻辑，导致按钮被多次渲染。

修正方案 #

直接使用@paypal/react-paypal-js提供的组件来实现，React会自动管理组件的生命周期，避免重复渲染问题：

import React from 'react'
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
import Navbar from '../../Compononets/Navbar/Navbar'
import Footer from '../../Compononets/Fotter/Fotter'
import './Pricing.scss'

export default function Pricing() {
  // 订阅创建逻辑
  const createSubscription = (data, actions) => {
    return actions.subscription.create({
      plan_id: 'P-80J548859J6351349MXTUSOY'
    });
  };

  // 审批成功逻辑
  const onApprove = (data) => {
    alert(data.subscriptionID);
  };

  return (
    <>
      <Navbar />
      <h1>This is pricing</h1>
      
      {/* 使用PayPalScriptProvider包裹按钮组件，配置SDK参数 */}
      <PayPalScriptProvider options={{ "client-id": "你的PayPal客户端ID" }}>
        <PayPalButtons
          style={{
            shape: 'rect',
            color: 'gold',
            layout: 'vertical',
            label: 'subscribe'
          }}
          createSubscription={createSubscription}
          onApprove={onApprove}
        />
      </PayPalScriptProvider>
         
      <Footer />
    </>
  );
}

关键改动说明 #

• 移除了原生window.paypal.Buttons()的手动调用，改用官方React组件<PayPalButtons>
• 用<PayPalScriptProvider>包裹按钮组件，统一管理PayPal SDK的加载，避免重复加载SDK导致的冲突
• 把按钮配置和回调逻辑抽离为单独函数，符合React组件化规范
• 不再需要手动指定渲染容器，React会自动处理按钮的挂载与卸载

额外注意事项 #

• 替换代码中的"你的PayPal客户端ID"为你实际的PayPal客户端ID（沙箱或生产环境）
• React组件会自动处理卸载时的清理工作，无需额外手动销毁按钮实例

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