英文:
useShoppingCart - TypeError: Cannot read properties of undefined (reading 'dispatch')
问题
我正在使用Stripe API和use-shopping-cart来开发一个电商网站，但我遇到了一个错误，似乎无法解决。如果我将页面包裹在CartProvider中，那个页面可以正常使用购物车，但我想在整个应用程序中全局使用它。所以我将整个应用程序都包裹在了CartProvider中，但现在我遇到了这个错误。我已经阅读了use-shopping-cart的文档，但找不到解决方案。
--相关代码--
_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { CartProvider, DebugCart } from "use-shopping-cart";
import * as config from "../config";
import { ReactNode } from "react";
const Cart = ({ children }: { children: ReactNode }) => (
<CartProvider
cartMode="checkout-session"
stripe={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string}
currency={config.CURRENCY}
shouldPersist={false}
>
<>{children}</>
</CartProvider>
);
export default function App({ Component, pageProps }: AppProps) {
return (
<Cart>
<Component {...pageProps} />
</Cart>
);
}
这段代码可以在单个页面中正常工作：
"use client";
import { NextPage } from "next";
import Cart from "./Cart";
import CartSummary from "./CartSummary";
import Products from "./Products";
const Checkout: NextPage = () => {
return (
<div>
<Cart>
<CartSummary />
<Products />
</Cart>
</div>
);
};
export default Checkout;
我卡住了，任何帮助将不胜感激。当我尝试在整个应用程序中使用useShoppingCart来添加、删除产品和结账时，我会遇到这个错误。当我只在单个页面中使用时，它可以正常工作，但我需要在整个应用程序中使用它。
英文:
I am using Stripe API and use-shopping-cart for a e-commerce site but I have run into this error that I can't seem to figure out, if I wrap a page with CartProvider that single page works with the shoppingcart but I am trying to use it globally throughout the application. So I wrapped the entire app with CartProvider but now I am getting this error. I have read through the use-shopping-cart docs but can't find a solution.
--relevant code--
_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { CartProvider, DebugCart } from "use-shopping-cart";
import * as config from "../config";
import { ReactNode } from "react";
const Cart = ({ children }: { children: ReactNode }) => (
<CartProvider
cartMode="checkout-session"
stripe={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string}
currency={config.CURRENCY}
shouldPersist={false}
>
<>{children}</>
</CartProvider>
);
export default function App({ Component, pageProps }: AppProps) {
return (
<Cart>
<Component {...pageProps} />
</Cart>
);
}
this works but only for this single page
"use client";
import { NextPage } from "next";
import Cart from "./Cart";
import CartSummary from "./CartSummary";
import Products from "./Products";
const Checkout: NextPage = () => {
return (
<div>
<Cart>
<CartSummary />
<Products />
</Cart>
</div>
);
};
export default Checkout;
I am stuck, any help would be appreciated. I get this error when I try and use useShoppingCart throughout the application for adding, removing products and checkout. when I only do this in a single page it works but I need to use this throughout the app.
答案1
得分: 1
添加<Provider>来解决这个问题。
我在Next 13项目中遇到了相同的错误，使用useShoppingCart时会出现"TypeError: Cannot read properties of undefined (reading 'dispatch')"。
我忘记在layout.jsx/js中包裹组件，一旦添加如下内容，错误就得以解决。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
<Providers>
<div>
<SiteHeader />
<SiteBlob />
<div>
{children}
</div>
<SiteFooter />
</div>
</Providers>
<!-- 结束代码片段 -->
英文:
Add <Provider> to solve it.
I got the same error in Next 13 project. whlie using useShoppingCart. it would give "TypeError: Cannot read properties of undefined (reading 'dispatch').
I had fogotten to wrap arround components in the layout.jsx/js once i added it as follows the error got resolved.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<Providers>
<div>
<SiteHeader />
<SiteBlob />
<div>
{children}
</div>
<SiteFooter />
</div>
</Providers>
<!-- end snippet -->
答案2
得分: 0
在下面的代码中，你需要首先创建一个提供者文件，将其标记为客户端组件，然后包装你的布局文件。
"use client";
import React, { ReactNode } from "react";
import { CartProvider } from "use-shopping-cart";
import * as config from "../../config";
import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);
const Cart = ({ children }: { children: ReactNode }) => (
<CartProvider
cartMode="checkout-session"
stripe={stripePromise as unknown as string}
currency={config.CURRENCY}
shouldPersist={false}
>
<>{children}</>
</CartProvider>
);
export default Cart;
布局文件如下：
import "../styles/globals.css";
import Footer from "./Footer";
import Header from "./Header";
import Cart from "./Provider/Cart";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
{/* <head /> */}
<body>
<Cart>
<Header />
{children}
<Footer />
</Cart>
</body>
</html>
);
}
英文:
Turns out that in order to use global variables in next 13 you need to first create your provider file mark it as a client component and then wrap your layout file.
"use client";
import React, { ReactNode } from "react";
import { CartProvider } from "use-shopping-cart";
import * as config from "../../config";
import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);
const Cart = ({ children }: { children: ReactNode }) => (
<CartProvider
cartMode="checkout-session"
stripe={stripePromise as unknown as string}
currency={config.CURRENCY}
shouldPersist={false}
>
<>{children}</>
</CartProvider>
);
export default Cart;
--layout--
import "../styles/globals.css";
import Footer from "./Footer";
import Header from "./Header";
import Cart from "./Provider/Cart";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
{/* <head /> */}
<body>
<Cart>
<Header />
{children}
<Footer />
</Cart>
</body>
</html>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论