× 反应：类型错误：对象(...)不是一个函数条纹

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;

这是我的代码后条纹尝试

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(…)不是一个函数

我试着研究我的代码问题，但没能找到任何解决方案。

我做错了什么?

谢谢你的帮助!我很感激!

Answer 1

你需要从normal stripe js中导入loadStripe，而不是像这样导入react版本:

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