时间戳

首页 > 解决方案 > “未定义条带”错误 - 在加载脚本之前调用函数？

javascript - “未定义条带”错误 - 在加载脚本之前调用函数？

问题描述

我认为我的脚本无法加载（或加载过早）有问题。

我尝试为支付实现Stripe 库。为此，在我的代码中使用 Stripe 函数之前，我必须包含一个脚本。我在我的公共文件夹中的标头 index.html 中添加了给定的脚本 src="https://js.stripe.com/v3/"，如下所示：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script src="https://js.stripe.com/v3/"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

我创建了一个空应用程序，只调用了 Stripe。这是 App.js ：

import React from 'react';
import './App.css';
import {Button} from 'react-bootstrap'

class App extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    var stripe = Stripe('pk_test_XXXXXXXXXXXX');
    // I will use stripe variable later. But for now I have an error with previous line
  }

  render() {
    return(
      <div>
          <Button 
                  className= "btn-xlBook"
                  variant="primary"
                  onClick={this.handleClick}>
                  OK
          </Button>
      </div>
    )
  }

}
export default App

但是当我启动纱线时，我有错误'Stripe' is not defined no-undef。

我不明白，我在标题中调用脚本，但行为就像尚未加载脚本一样。

你知道怎么解决吗？II 在 index.html 的头文件中添加一个脚本，它应该在应用程序之前加载，不是吗？

标签： javascriptreactjsstripe-payments

解决方案

您不会Stripe在任何地方导入。就像你做Button的那样。查看React Stripe Elements，了解如何在 React 中使用 Stripe 的一个示例。

推荐阅读