Реакция размонтирования кнопки Paypal

Question

У меня есть кнопка 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
      }}
    />
  );

Сообщение об ошибке, которое я получаю:

Uncaught Error: Нет ответа из окна - очищено

Я не получаю это сообщение об ошибке при успешном удалении,что происходит, когда я обработал платеж.

ссылка:

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