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

Question

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

我不知道如何从 'order' 页面更新 'cart' 状态。

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

如何从我的 'order' 组件内部更新 'cartitems' 状态？

我有上下文对象的文件：


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;

最后，我的 'order' 组件，我正在尝试更新 'cartitems' 状态：

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();

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

Transferring data from one state object to another while using React context in a Next.js app

reactjs

next.js

use-context