× React: TypeError: Object(...) is not a function Stripe

Question

我正在创建一个电子商务网站。

这是我第一次使用 Stripe，我不知道为什么会出现此错误。

这是我的预条纹代码

import React, { useEffect } from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Checkout from "./Checkout";
import Login from "./Login";
import Payment from "./Payment";
import { auth } from "./firebase";
import { useStateValue } from "./StateProvider";


function App() {
  const [{}, dispatch] = useStateValue();

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      console.log("THE USER OS >>>", authUser);

      if (authUser) {
        dispatch({
          type: "SET_USER",
          user: authUser,
        });
      } else {
        dispatch({
          type: "SET_USER",
          user: null,
        });
      }
    });
  }, []);

  return (
    // BEM
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/checkout">
            <Header />
            <Checkout />
          </Route>
          <Route path="/payment">
            <Header />
            <Payment />
          </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

这是我的代码post条纹尝试

import React, { useEffect } from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Checkout from "./Checkout";
import Login from "./Login";
import Payment from "./Payment";
import { auth } from "./firebase";
import { useStateValue } from "./StateProvider";
import { loadStripe } from "@stripe/react-stripe-js";
import { Elements } from "@stripe/react-stripe-js";

const promise = loadStripe(
  "pk_live_51JSoCCJMzgZXrTSfThco77AU3gAgoJSXJdClY0msBR7Z3r3E7v38j1O17u0cDC9vwAbfdvS522hISYXEQ5n7ccn400AT2T3NaN"
);

function App() {
  const [{}, dispatch] = useStateValue();

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      console.log("THE USER OS >>>", authUser);

      if (authUser) {
        dispatch({
          type: "SET_USER",
          user: authUser,
        });
      } else {
        dispatch({
          type: "SET_USER",
          user: null,
        });
      }
    });
  }, []);

  return (
    // BEM
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/checkout">
            <Header />
            <Checkout />
          </Route>
          <Route path="/payment">
            <Header />
            <Elements stripe={promise}>
              <Payment />
            </Elements>
          </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

我正在关注在线教程，当他们添加时

const promise = loadStripe(
  "pk_live_51JSoCCJMzgZXrTSfThco77AU3gAgoJSXJdClY0msBR7Z3r3E7v38j1O17u0cDC9vwAbfdvS522hISYXEQ5n7ccn400AT2T3NaN"
);

没有问题，但是每当我将它添加到我的代码中时，我都会收到 TypeError: Object(...) is not a function

我已尝试研究我的代码中的问题，但未能找到任何解决方案。

我做错了什么？

感谢您的帮助！我很感激！

Answer 1

您需要从普通的 stripe js 导入 loadStripe 而不是像这样的 react 版本：

import {loadStripe} from "@stripe/stripe-js";
import {Elements} from "@stripe/react-stripe-js";

× React: TypeError: Object(...) is not a function Stripe

× React: TypeError: Object(...) is not a function Stripe

javascript

stripe-payments

reactjs