reactjs - react ，购物车与上下文和本地存储

Question

我有一个演示 here
这是一个购物车，其中的产品可以添加到购物车并显示总数。
我使用状态的上下文，因为产品和购物车是不同的组件。
我想使用 localstorage 来存储购物车和总数据，因此如果刷新页面，购物车数据不会丢失。
我可以将数据存储在 localstorage 中

useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(items));
    total();
  }, [items]); 
  

但是当页面再次加载时，我不确定如何使用它。
我想要一个购物车，我可以在其中添加和删除产品并将它们存储在本地存储中，我不确定使用上下文是否是最佳选择，或者仅使用 localstorge 可能更好。
但无论如何，如何在页面刷新时使用 localstorage 加载购物车和总数据。

Answer 1

我做了一些更改 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]);
        }
      }, [])}
    >

现在尝试刷新页面，您之前的购物车状态将恢复。
快乐编码...