Question

我在React Web前端中集成了Stripe。我的付款组件尝试运行…

componentDidLoad() {
  if ( window.hasOwnProperty('Stripe') ) {
    this.setState({stripe: window.stripe(config.stripeKey)})
  }
}

这偶尔会失败，因为有时React应用程序会在window.stripe存在之前启动并加载组件。我目前正在通过...解决此问题

componentDidLoad() {
  this.watchStripe = setInterval( () => {
    if (!props.stripe && isBrowser && window.Stripe) {
      this.setState({stripe: window.stripe(config.stripeKey)})
      clearInterval(this.watchStripe)
    }
  }, 100)
}

是否有更优雅的解决方案，不需要间隔计时器？

Answer 1

如果您阅读Advanced integrations section，他们建议您这么做

componentDidMount() {
    if (window.Stripe) {
      this.setState({stripe: window.Stripe('pk_test_12345')});
    } else {
      document.querySelector('#stripe-js').addEventListener('load', () => {
        // Create Stripe instance once Stripe.js loads
        this.setState({stripe: window.Stripe('pk_test_12345')});
      });
    }
  }

这会在load元素上为script事件添加一个事件侦听器，该事件侦听器将加载Stripe并在可用时设置状态（因此不能使用setInterval进行连续轮询， setTimeout是必需的）

window.stripe

1 个答案: