我有一个演示 here
这是一个购物车,其中的产品可以添加到购物车并显示总数。
我使用状态的上下文,因为产品和购物车是不同的组件。
我想使用 localstorage 来存储购物车和总数据,因此如果刷新页面,购物车数据不会丢失。
我可以将数据存储在 localstorage 中
useEffect(() => {
localStorage.setItem("cart", JSON.stringify(items));
total();
}, [items]);
但是当页面再次加载时,我不确定如何使用它。我想要一个购物车,我可以在其中添加和删除产品并将它们存储在本地存储中,我不确定使用上下文是否是最佳选择,或者仅使用 localstorge 可能更好。
但无论如何,如何在页面刷新时使用 localstorage 加载购物车和总数据。
最佳答案
我做了一些更改 click here
您只需在 carts.tsx
中添加以下代码即可文件
const [isInitiallyFetched, setIsInitiallyFetched] = useState(false);
const addItems = useContext(AddCartContext);
useEffect(()=>{
let prev_items = JSON.parse(localStorage.getItem('cart')) || [];
addItems(prev_items)
setIsInitiallyFetched(true)
},[])
useEffect(() => {
if(isInitiallyFetched){
localStorage.setItem("cart", JSON.stringify(items));
total();
}
}, [items]);
确保导入 AddCartContext
.而在
context.tsx
<AddCartContext.Provider
value={useCallback(item => {
if (Array.isArray(item)) {
setItems([...itemsRef.current, ...item]);
} else {
setItems([...itemsRef.current, item]);
}
}, [])}
>
现在尝试刷新页面,您之前的购物车状态将恢复。快乐编码...
关于reactjs - react ,购物车与上下文和本地存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65523588/