PayPal React Js 按钮有时会消失

Question

我正在构建一个基本的 React 集成，我测试了按钮是否正常工作，除了大约一半的时间，它们只是在短暂出现 100 毫秒左右后从网页上消失

import React from 'react';
import "./website1.css"
//import { loadScript } from 'paypal-checkout';
import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
import { useEffect } from "react";


class Website1 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      cartItems: []
    };
    this.addToCart = this.addToCart.bind(this);
    this.removeFromCart = this.removeFromCart.bind(this);
    this.handleEmptyCart = this.handleEmptyCart.bind(this);
  }


  addToCart(item) {
    this.setState(prevState => ({
      cartItems: [...prevState.cartItems, item]
    }));
  }

  handleEmptyCart() {
    this.setState({ cartItems: [] });
  }


  removeFromCart(index) {
    this.setState(prevState => {
      const newItems = [...prevState.cartItems];
      newItems.splice(index, 1);
      return { cartItems: newItems };
    });
  }

  render() {
    return (
      <div className="website1-container">
        <div className="products-container">
          <h2>Products</h2>
          <ul>
            <li>
              Product 1
              <button onClick={() => this.addToCart("Product 1")}>
                Add to cart
              </button>
            </li>
            <li>
              Product 2
              <button onClick={() => this.addToCart("Product 2")}>
                Add to cart
              </button>
            </li>
            <li>
              Product 3
              <button onClick={() => this.addToCart("Product 3")}>
                Add to cart
              </button>
            </li>
          </ul>
        </div>
        <div className="cart-panel">
          <h2>Shopping Cart</h2>
          <ul>
            {this.state.cartItems.map((item, index) => (
              <li key={index}>
                {item}
                <button onClick={() => this.removeFromCart(index)}>
                  Remove
                </button>
              </li>
            ))}
            {/* Check if the cart is not empty */}
            {this.state.cartItems.length > 0 && (
              <><button className="empty-cart-button" onClick={this.handleEmptyCart}>Empty Cart</button><div className="paypal-buttons-container" id="paypal-button-container">
                <PayPalScriptProvider
                  options={{
                    "client-id": "myid",
                    components: "buttons",
                    currency: "USD"
                  }}
                >
                  <ButtonWrapper
                    currency={currency}
                    showSpinner={true}
                  >
                  </ButtonWrapper>
                </PayPalScriptProvider>

              </div></>
            )}
          </ul>
        </div>
      </div>
    );
  }

}

export default Website1;
// This values are the props in the UI
const amount = "2";
const currency = "USD";
const style = { "layout": "vertical" };

// Custom component to wrap the PayPalButtons and handle currency changes
const ButtonWrapper = ({ currency, showSpinner }) => {
  // usePayPalScriptReducer can be use only inside children of PayPalScriptProviders
  // This is the main reason to wrap the PayPalButtons in a new component
  const [{ options, isPending }, dispatch] = usePayPalScriptReducer();

  useEffect(() => {
    dispatch({
      type: "resetOptions",
      value: {
        ...options,
        currency: currency,
      },
    });
  }, [currency, showSpinner]);


  return (<>
    {(showSpinner && isPending) && <div className="spinner"></div>}
    <p>Buttons go here</p>
    <PayPalButtons
      style={style}
      disabled={false}
      forceReRender={[amount, currency, style]}
      fundingSource={undefined}
      createOrder={(data, actions) => {
        return actions.order
          .create({
            purchase_units: [
              {
                amount: {
                  currency_code: currency,
                  value: amount,
                },
              },
            ],
          })
          .then((orderId) => {
            // Your code here after create the order
            return orderId;
          });
      }}
      onApprove={function (data, actions) {
        return actions.order.capture().then(function () {
          // Your code here after capture the order
        });
      }}
    />
  </>
  );
}

据我所知后端工作正常

它使用标准集成中的 server.js

import "dotenv/config"; // loads variables from .env file
import express from "express";
import * as paypal from "./paypal-api.js";
const { PORT = 3000 } = process.env;

const app = express();

app.use(express.static("public"));

// parse post params sent in body in json format
app.use(express.json());

app.post("/my-server/create-paypal-order", async (req, res) => {
  try {
    const order = await paypal.createOrder();
    res.json(order);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.post("/my-server/capture-paypal-order", async (req, res) => {
  const { orderID } = req.body;
  try {
    const captureData = await paypal.capturePayment(orderID);
    res.json(captureData);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(PORT, () => {
  console.log(`Server listening at http://localhost:${PORT}/`);
});

按钮有时有有时没有，

当它们不存在时，iframe 就会消失

如何调试这个问题？