如何防止在React中渲染多个PayPal按钮

Question

我正在尝试将 PayPal 按钮集成到我的 React Web 应用程序中，但我不断收到重复的按钮，控制台中的许多消息表明有某些原因导致它们多次渲染。这是代码：

import React,{useCallback, useEffect, useRef, useState} 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() {
    
  useEffect(()=>{
    {
      window.paypal.Buttons({
       style: {
         shape: 'rect',
         color: 'gold',
         layout: 'vertical',
         label: 'subscribe'
       },
       createSubscription: (data, actions)=> {
         return actions.subscription.create({
           plan_id: 'P-80J548859J6351349MXTUSOY'
         });
       },
       onApprove: (data, actions)=> {
         alert(data.subscriptionID); // Optional success message
       }
     }).render('#paypal-button-container')
     }
  },[])
     
      return (
        <>
          <Navbar />
          <h1>This is pricing</h1>
          
          <div className="App">
          <div id="paypal-button-container"></div>
          </div>
         
          <Footer />
        </>
      );
      
    
}

Answer 1

这可能是因为您正在运行

StrictMode

，它会运行两次效果，以便在效果未正确清理时发现逻辑错误。找到了。

我推荐一个不同的解决方案 - 使用 callback ref:

<div id="paypal-button-container" ref={useCallback(el => {
  if(!el) return; 
  
  // all the code from your useEffect
 
},[]}></div>