react-stripe-elements 未检测到 Stripe.js答案

【问题标题】：react-stripe-elements not detecting Stripe.jsreact-stripe-elements 未检测到 Stripe.js
【发布时间】：2018-01-16 23:28:37
【问题描述】：

我对@987654322@ 有一个奇怪的问题。该模块因未捕获的错误而崩溃，内容如下：

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>

这与stripehere提供的说明一致。

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

情况似乎很简单，我什至不确定要采取什么途径来调试它。 Stripe js 应该存在，并且存在，但未检测到。有没有人遇到过这个问题或知道如何解决这个问题？

【问题讨论】：

标签： javascript reactjs stripe-payments

【解决方案1】：

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

【讨论】：

任何解决方案或只是生活中的事实？
解决办法是稳定我的互联网连接。
我猜你必须注意错误并抓住它，这样应用程序才不会崩溃？还是您只是希望它永远不会发生在真实用户身上？
我想如果您担心真正的用户会看到它，您可以抓住它并按照“连接到 Stripe 时遇到问题，您的互联网连接可能不稳定”这样的方式显示一个模式。跨度>

【解决方案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
}

【讨论】：

我将其插入，因为它似乎可以解决我的问题。但是，我现在得到 TypeError: TypeError: (0, _react.useState)({})','(0, _react.useState)' is undefined。在屏幕和组件中，我将 import React, { useState, useEffect } from 'react' 作为第一行。 -- 请指教。
@Taersious 这似乎是您使用的 React 版本的问题。尝试至少更新到 16.8 版本（带有 Hooks 的版本：reactjs.org/blog/2019/02/06/react-v16.8.0.html）