PayPal 按钮未关闭（重新渲染后重复）

Question

我正在使用 React 实现 PayPal 智能支付按钮，每次重新渲染我的组件时，我都会收到按钮的副本（底部的按钮包含正确的交易信息）。

window.paypal.close()显然我需要关闭按钮，如果我尝试这样做，我会收到不是函数的错误。

我尝试遵循这个示例：Paypal React在更改金额后显示额外的按钮

这是我的代码，我使用 Redux 进行状态管理，如果购物车中的商品被删除，我需要重新渲染组件（以更新交易的商品信息）：

  useEffect(() => {

  if (window.myButton) {
    window.myButton.close()
  }
  
  window.myButton = window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: "test transaction",
                amount: {
                  currency_code: "USD",
                  value: document.getElementById("totalAmount").innerHTML,
                  breakdown: {
                    item_total: {
                      currency_code: "USD",
                      value: document.getElementById("totalAmount").innerHTML
                    }
                  }

                }
                ,
                items: itemsInCart.map(item => {
                  console.log(item.value)
                  return {
                    name: item.name,
                    unit_amount: {
                      currency_code: "USD",
                      value: String(item.price)
                    },
                    quantity: "1"
                  }
                })
              }
            ]
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
        }
            .catch(function(error) {
              console.error("Error writing document: ", error);
            });
        },
        onError: err => {
          // setError(err);
          console.error(err);
        }
      })

      .render(paypalRef.current)
  }, [itemsInCart]);

Answer 1

    })

    .render(paypalRef.current)

问题是您将 myButton 设置为 .render() 承诺结果，而不是按钮本身。

您需要存储对实际 Button 的引用（在渲染它之前），然后才对其进行 .render() ，以便稍后您可以对该引用调用 .close() 。基本上：

    let myButton = paypal.Buttons(
        ....
    });

    myButton.render(paypalRef.current)

    // and at some later point in time...
    myButton.close();