React 卸载一个 Paypal 按钮

Question

我有一个使用 Modal 组件呈现的 Paypal 按钮。在不引发清理错误的情况下卸载 Paypal 按钮的正确方法是什么？

这是对话框的实现

<Drawer anchor="bottom" open={open} onClose={() => setStatus(false)}>
        <section className={classes.innerDrawer}>
          <h2 className={classes.innerDrawerTitle}>
            {loading ? '' : 'Checkout'}
          </h2>
          <PaypalButton
            ...props
          />
    </section>
  </Drawer>

还有按钮

const Button = paypal.Button.driver('react', { React, ReactDOM });

return (
    <Button
      env={PAYPAL_ENV}
      client={client}
      payment={(data, actions) => payment(data, actions)}
      onAuthorize={data => execute(data.payerID, data.paymentID)}
      style={{
        size: 'medium', // tiny, small, medium
        color: 'blue', // orange, blue, silver
        shape: 'rect', // pill, rect
      }}
    />
  );

我得到的错误信息：

未捕获的错误：窗口无响应 - 已清理

卸载成功时我没有收到此错误消息，这发生在我处理付款时。

链接：

https://codesandbox.io/s/r4zvkjm2kq

Answer 1

我无法重现您的问题，但我已尝试执行与您相同的代码。

在此示例中，PayPal 按钮安装在 Drawer 元素中，该元素在单击按钮后安装。当您单击抽屉外的任何位置时，抽屉将被卸载。

class Modal extends React.Component {
    constructor() {
      super()
      this.state = {
        open: false
      }
    }

    render () {      
      return (
        <div>
          <button onClick={() => this.setState({ open: true })}>Open Drawer</button>
          {
            this.state.open &&
            <Drawer anchor="left" open={true} onClose={() => this.setState({ open: false })}>
              <PayPalButton
                commit={this.state.commit}
                env={this.state.env}
                client={this.state.client}
                payment={(data, actions) => this.payment(data, actions) }
                onAuthorize={(data, actions) => this.onAuthorize(data, actions)}
                />
            </Drawer>
          }
        </div>
       )
    }
  }

工作演示：https://codepen.io/herodrigues/pen/gqQEgr