next.js 使用购物车-类型错误：无法读取未定义的属性(阅读“dispatch”)

hgqdbh6s 于 2023-02-22 发布在其他

关注(0)|答案(1)|浏览(110)

我正在使用条纹API和使用购物车的电子商务网站，但我遇到了这个错误，我似乎无法弄清楚，如果我用CartProvider Package 了一个页面，那么这个页面就可以使用购物车，但是我试图在整个应用程序中全局使用它。所以我用CartProvider Package 了整个应用程序，但是现在我收到了这个错误。我已经通读了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整个应用程序添加，删除产品和结帐。当我只在一个页面中这样做，它的作品，但我需要在整个应用程序中使用这个。

next.js

来源：https://stackoverflow.com/questions/75494844/useshoppingcart-typeerror-cannot-read-properties-of-undefined-reading-dispa

1条答案

按热度按时间

3pmvbmvn1#

结果是，为了在接下来的13中使用全局变量，您需要首先创建您的提供程序文件，将其标记为客户端组件，然后 Package 您的布局文件。

"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>
  );
}

赞(0）回复(0）举报 2023-02-22

我来回答

next.js 使用购物车-类型错误：无法读取未定义的属性(阅读“dispatch”)

1条答案

相关问题

热门标签

最新问答