使用上下文和useReducer解析来自本地存储错误的项
提问于 2022-01-23 18:52:05
在我的next.js电子商务应用程序中，我在从本地存储中提取数据时遇到了问题。最初，我从购物车上下文文件中并使用useReducer将项目保存到购物车中。在cart provider组件中，我涉及useEffect，并使用JSON.stringify()将cartState设置为本地存储；我刚刚了解到，useReducer接受第三个参数，该参数可以返回值，并且根据我理解的方式，可以覆盖传递的初始状态。在这个匿名函数中，我调用localStorage来检查是否有“本地数据”，如果有，则返回解析的本地数据。我收到一个错误，说没有定义本地存储。任何帮助都是非常感谢的。
const CartProvider = (props) => {
const [cartState, dispatchCartState] = useReducer(
reducerFN,
initialCartState,
() => {
let localData = localStorage.getItem("items");
return localData ? JSON.parse(localData) : [];
}
);
useEffect(() => {
localStorage.setItem("items", JSON.stringify(cartState));
}, [cartState]);
回答 1
Stack Overflow用户
发布于 2022-07-06 00:37:18
在Context.js:中尝试这一点
useEffect(() => {
if (JSON.parse(localStorage.getItem("state"))) {
dispatch({
type: INIT_STORED_CART,
payload: JSON.parse(localStorage.getItem("state")),
});
}
}, []);
useEffect(() => {
if (state !== initialState)
localStorage.setItem("state", JSON.stringify(state));
}, [state]);和In reducer.js只返回它的有效载荷！，我跳这个对您
很有帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70828493
复制相关文章
腾讯云开发者
