reactjs - 在 Next.js 应用程序中使用 React 上下文时将数据从一个状态对象传输到另一个状态对象
问题描述
我正在使用 React 和 Next.js 构建一个非常简单的餐厅网站。我有一个主页和一个“订单”页面,它从一个状态对象(“menuitems”)呈现一个菜单。我希望用户能够将项目添加到他们的“购物车”,这是另一个状态对象。所以最终我将数据从静态“menuitems”状态传输到“购物车”。
我不知道如何从“订单”页面更新“购物车”状态。
我已经为脱离本指南的应用设置了上下文。我已经能够使用对自定义挂钩“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;
解决方案
在您的提供者中创建一个状态,然后将 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();
推荐阅读
- bigdata - 如何使用数组数据类型加入配置单元?
- angular - “forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)”有什么作用?
- python - 如何使用链接节点的 Unicode 行打印树
- python - 并行运行硒/并行或按顺序刮取多个站点?
- thymeleaf - Thymeleaf:使用 #session 时偶尔出错 - 评估 SpringEL 表达式时出现异常
- php - 根据特定参数在 Laravel 中对数组进行排序
- php - Laravel - 如果表存在,则仅查询模型
- node.js - Nodejs/Socket.emit 不工作,找不到数据
- android - 我们如何阻止电话、短信和通知?
- typescript - 打字稿错误:TS2304 找不到名称