在 Next.js 应用程序中使用 React 上下文时将数据从一个状态对象传输到另一个状态对象

Question

我正在使用 React 和 Next.js 构建一个非常简单的餐厅网站。我有一个主页和一个“订单”页面，它从一个状态对象（“menuitems”）呈现一个菜单。我希望用户能够将项目添加到他们的“购物车”，这是另一个状态对象。所以最终我将数据从静态“menuitems”状态传输到“购物车”。

我不知道如何从“订单”页面更新“购物车”状态。

我已经为应用程序设置了一个上下文 this guide。我已经能够使用对自定义钩子“useAppContext()”的调用成功访问菜单，但我不再有权访问通过 useState() 或 useContext() 调用提供的更新程序函数，我以前在构建类似的东西时使用过将所有内容放在一个文件中（您可以在下面的代码中看到我调用现在未定义的 setCartItem() 函数）。

如何从“订单”组件内部更新“购物车”状态？

我有我的上下文对象的文件：

import { createContext, useContext } from "react";

const AppContext = createContext();

export function AppWrapper({ children }) {
  const state = {
    menuitems: [
      {
        title: "Spagett",
        description: "Our finest spagett made with homemade meatballs and sauce.",
      },
      {
        title: "Sandwich",
        description: "You gotta try this sandwich",
      },
      {
        title: "BFB",
        description: "Watch out for your toilet after this one bro",
      },
    ],
    cartitems: []

  }



  return (
    <AppContext.Provider
      value={state}
    >
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

我的 _app.js 文件：

import "../styles/globals.css";
import { AppWrapper } from "./context/state";

function MyApp({ Component, pageProps }) {
  return (
    <AppWrapper>
      <Component {...pageProps} />
    </AppWrapper>
  );
}

export default MyApp;

最后，我的“订单”组件，我正在尝试更新“购物车”状态：

import Link from "next/link";
import { useAppContext } from "./context/state";


//IMPORT CONTEXT

const OrderPage = () => {
  const { menuitems } = useAppContext();
  const { cartitems } = useAppContext();


  const renderedMenu = menuitems.map((item) => (
    <div key={item.name} className="order-item">
      <h4>{item.title}</h4>
      <p>{item.description}</p>
      <button onClick={() => setCartItem([...cartitems, item.title])}>
        Add Item
      </button>
    </div>
  ));

  return (
    <div>

      <Link href="/">
        <a>Go home</a>

      </Link>
      <div>{renderedMenu}</div>
    </div>
  );
};

export default OrderPage;

Answer 1

在您的提供者中创建一个状态，然后将 setCartItems 传递到您的上下文中。

export function AppWrapper({ children }) {

  const [ cartItems, setCardItems ] = useState([])
  const state = {
    menuitems: [
      {
        title: "Spagett",
        description: "Our finest spagett made with homemade meatballs and sauce.",
      },
      {
        title: "Sandwich",
        description: "You gotta try this sandwich",
      },
      {
        title: "BFB",
        description: "Watch out for your toilet after this one bro",
      },
    ],
    cartitems: []

  }



  return (
    <AppContext.Provider
      value={{ state, cartItems, setCardItems }}
    >
      {children}
    </AppContext.Provider>
  );
}

你可以这样使用它。

const { state, cartItems, setCartitems } = useAppContext();