Блог

Я создаю довольно простой веб-сайт ресторана, используя React и Next.js . У меня есть домашняя страница и страница «заказа», которая отображает меню из объекта состояния («menuitems»). Я хочу, чтобы пользователь мог добавлять товары в свою «корзину», которая является другим объектом состояния. Итак, в конечном итоге я переношу данные из статического состояния «menuitems» в «корзину».

Чего я не могу понять, так это как я могу обновить состояние «корзины» со страницы «заказ».

Я настроил контекст для приложения, выходящего из этого руководства. Я смог успешно получить доступ к меню, используя вызов пользовательского хука ‘useAppContext ()’, но у меня больше нет доступа к функциям обновления, предоставляемым с помощью вызовов useState () или useContext (), которые я ранее использовал, когда создавал что-то подобное со всем в одном файле (вы можете увидеть вмой код ниже, где я вызываю теперь неопределенную функцию setCartItem()).

Как я могу обновить состояние ‘cartitems’ изнутри моего компонента ‘order’?

Файл, в котором у меня есть мой контекстный объект:

 
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;

 

Создайте состояние в своем провайдере, затем передайте 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();