Question

我正在用React实现PayPal Smart Payment Buttons，每次我的组件重新呈现时，我都会收到一个重复的按钮（底部的一个按钮包含正确的交易信息）。

很显然，如果我尝试关闭按钮，则会收到window.paypal.close()不是函数的错误消息。

我尝试遵循以下示例：Paypal React shows extra buttons after changing amount

这是我的代码，我正在使用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。

您需要存储对实际Button（未呈现）的引用，然后存储.render（），以便以后可以在该引用上调用.close（）。基本上：

      });

myButton.render(paypalRef.current)

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

1 个答案: