Question

react-stripe-elements我遇到了一个奇怪的问题。模块崩溃时出现未被捕获的错误，内容如下：

Uncaught Error: Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements.
    at new Provider (Provider.js:38)
    at ReactCompositeComponent.js:294
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:293)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at Object.updateChildren (ReactChildReconciler.js:121)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:206)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:310)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:297)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:942)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:760)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:722)
    at Object.receiveComponent (ReactReconciler.js:124)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
    at Object.receiveComponent (ReactReconciler.js:124)
    at Object.updateChildren (ReactChildReconciler.js:109)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:206)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:310)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:297)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:942)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:760)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:722)
    at Object.receiveComponent (ReactReconciler.js:124)
    at Object.updateChildren (ReactChildReconciler.js:109)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:206)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:310)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:297)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:942)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:760)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:722)
    at Object.receiveComponent (ReactReconciler.js:124)

该模块似乎认为未加载Stripe.js。但是，我已确认以下内容属于<head>：

<script src="https://js.stripe.com/v3/"></script>

这与条带here提供的说明一致。

如果我刷新页面，它会加载正常而不会抛出错误！

情况似乎很简单，我甚至不确定要调试它的途径。条纹js应该存在，它是，但它没有被检测到。有没有人遇到过这个问题或有任何想法如何处理它？</ p>

Answer 1

如果有人遇到类似行为，则此问题是由于互联网连接不稳定造成的。事实证明，与条带的连接比与其他任何东西的连接更不稳定，并且stripe.js库未正确下载。这就是为什么要问我Please load stripe.js。

Answer 2

创建一个函数，该函数返回Promise来加载stripe.js，并使用React Hooks(useState, useEffect)触发操作，以在加载Stripe脚本时显示React Stripe元素。

import React, { useState, useEffect } from 'react
import {
  StripeProvider,
  Elements,
  CardNumberElement
} from 'react-stripe-elements'

const loadScript = src =>
  new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = src
    script.addEventListener('load', () => {
      resolve({ successful: true })
    })
    script.addEventListener('error', event => {
      reject({ error: event })
    })
    document.head.appendChild(script)
  })

const MyComponent = () => {
 const [stripeLoaded, setStripeLoaded] = useState({})
  useEffect(() => {
    const fetchData = async () => {
      const result = await loadScript('https://js.stripe.com/v3/')
      setStripeLoaded(result)
    }
    fetchData()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps 

  return  stripeLoaded.successful ? (
    <StripeProvider>
      <Elements>
        <CardNumberElement />
      </Elements>
    </StripeProvider>) : null
}

react-stripe-elements不检测Stripe.js

2 个答案: