PayPal React 在更改金额后显示额外的按钮答案

【问题标题】：PayPal React shows extra buttons after changing amountPayPal React 在更改金额后显示额外的按钮
【发布时间】：2020-10-02 07:17:00
【问题描述】：

没有 react-paypal-button-v2 ~~~有 60KB 的开销

类似的问题 here 但他们建议 react-paypal-button-v2

我正在尝试制作一个 React PayPal 按钮，用于更改道具的账单金额。

我用道具价格调用以下组件，每次价格变化时我都想重新渲染按钮以更新实际价格。 没有 react-paypal-button-v2

const PaypalForm = props => {
  let paypalRef = useRef();

  useEffect(() => {      
    window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: "test",
                amount: {
                  currency_code: "USD",
                  value: props.price
                }
              }
            ]
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          console.log(order);
        },
        onError: err => {
          setError(err);
          console.error(err);
        }
      })
      .render(paypalRef.current);
  }, [props.price]);

  return (
    <Row className="justify-content-center">
      {error && <div>Uh oh, an error occurred! {error.message}</div>}
      <div ref={paypalRef} />
    </Row>
  );
};

除了在每次道具更改时创建一个新按钮并将其添加到旧按钮的底部之外，一切正常。我想用我的新按钮替换旧按钮。 不使用 react-paypal-button-v2

【问题讨论】：

标签： reactjs paypal paypal-sandbox paypal-rest-sdk

【解决方案1】：

类似：

useEffect(() => {
    if(window.myButton) window.myButton.close();
    window.myButton = window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: "test",
                amount: {
                  currency_code: "USD",
                  value: props.price
                }
              }
            ]
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          console.log(order);
        },
        onError: err => {
          setError(err);
          console.error(err);
        }
      });
    window.myButton.render(paypalRef.current);

但是，您确实实际上需要在价格变化时重新渲染按钮！

你可以做 value: document.getElementById('...').value 或类似的（或任何你需要的变量或函数调用）

在您的示例中，如果props.price 在单击按钮时返回（新/当前）所需值，则将使用该值。

基本上，createOrder 函数在您单击按钮之前不会被调用。

【讨论】：