React在线商店问题：createContext页面刷新后丢失数据

要解决页面刷新后购物车数据丢失的问题，只需在CartProvider中做两处核心修改：从localStorage初始化状态，以及在状态变更时自动同步到localStorage。

具体实现步骤 #

• 初始化状态读取localStorage：将useState的初始值设为从localStorage.getItem('cartProducts')读取并解析的数据，无数据时用空数组兜底。
• 监听状态变化同步存储：用useEffect监听购物车数据的变化，每次更新时将数据转为JSON字符串存入localStorage。
• 保留原有业务逻辑：购物车的增删改查函数无需大幅调整，只需确保状态更新逻辑正确触发即可。

修改后的完整代码 #

import { createContext, useState, useEffect } from "react";
import { productsArray, getProductData } from "./productsConfig";

export const CartContext = createContext({
    items: [],
    getProductQuantity: () => {},
    addOneToCart:       () => {},
    removeOneFromCart:  () => {},
    deleteFromCart:     () => {},
    getTotalCost:       () => {}
});

export function CartProvider({children}) {
    // 从localStorage读取初始购物车数据，解析失败则用空数组
    const [cartProducts, setCartProducts] = useState(() => {
        const savedCart = localStorage.getItem('cartProducts');
        return savedCart ? JSON.parse(savedCart) : [];
    });

    // 监听购物车数据变化，自动同步到localStorage
    useEffect(() => {
        localStorage.setItem('cartProducts', JSON.stringify(cartProducts));
    }, [cartProducts]);

    function getProductQuantity(id) {
        const quantity = cartProducts.find(product => product.id === id)?.quantity;
        return quantity ?? 0; // 简化undefined判断逻辑
    }

    function addOneToCart(id) {
        const quantity = getProductQuantity(id);

        if (quantity === 0) {
            setCartProducts(prev => [...prev, { id, quantity: 1 }]);
        } else {
            setCartProducts(prev => 
                prev.map(product => 
                    product.id === id ? { ...product, quantity: product.quantity + 1 } : product
                )
            );
        }
    }
    
    function removeOneFromCart(id) {
        const quantity = getProductQuantity(id);

        if (quantity === 1) {
            deleteFromCart(id);
        } else {
            setCartProducts(prev => 
                prev.map(product => 
                    product.id === id ? { ...product, quantity: product.quantity - 1 } : product
                )
            );
        }
    }

    function deleteFromCart(id) {
        setCartProducts(prev => 
            prev.filter(currentProduct => currentProduct.id !== id)
        );
    }

    function getTotalCost() {
        return cartProducts.reduce((total, cartItem) => {
            const productData = getProductData(cartItem.id);
            return total + (productData.price * cartItem.quantity);
        }, 0); // 用reduce简化累加逻辑
    }

    const contextValue = {
        items: cartProducts,
        getProductQuantity,
        addOneToCart,
        removeOneFromCart,
        deleteFromCart,
        getTotalCost
    }

    return (
        <CartContext.Provider value={contextValue}>
            {children}
        </CartContext.Provider>
    )
}

export default CartProvider;

关键修改说明 #

• 初始状态优化：使用useState的函数式初始值，避免每次渲染都重复读取localStorage，提升性能；同时处理解析失败的边界情况，保证初始值安全。
• 自动同步存储：useEffect的依赖数组设为[cartProducts]，确保购物车数据每一次变化都会触发保存操作，实现状态持久化。
• 代码简化：用??空值合并运算符简化getProductQuantity的返回逻辑，用reduce替代map+手动累加优化getTotalCost的实现，逻辑更简洁高效。

内容的提问来源于stack exchange，提问作者user3011353