React useContext跨页面无法更新购物车状态问题求助

在基于Next.js App Router的购物车练习项目中，使用React useContext管理全局购物车状态时出现问题：在产品页添加商品到购物车后，切换到购物车页只能读取到购物车的初始值（含测试对象的数组），无法获取更新后的状态。已尝试修改addToCart函数避免数组变异，但问题仍存在。

问题根源 #

你在产品页和购物车页中额外嵌套了CartProvider，这会导致每个页面创建独立的上下文实例，和RootLayout中全局挂载的CartProvider不是同一个。每个页面的上下文各自维护独立的状态，自然无法实现跨页状态共享。

另外，addToCart函数中直接console.log(cart)会打印旧值，因为React的setState是异步操作，此时状态还未更新。

解决方案 #

1. 移除页面中多余的CartProvider #

RootLayout已经在全局层级挂载了CartProvider，所有子页面都会共享这个上下文，不需要在单个页面中再次包裹CartProvider。

修改后的产品页代码

//products page
'use client'
import React, { useContext, useEffect, useState } from 'react';
import { CartContext } from '../context/cartContext';
import ListItem from '../components/ListItem';

const url = 'https://fakestoreapi.com/products';

export default function Page() {
    const { cart, addToCart } = useContext(CartContext);
    const [products, setProducts] = useState([])

    useEffect(()=>{
        async function fetchData(){
            try {
                const response = await fetch(url);
                const data = await response.json();
                setProducts(data);
            } catch (error) {
                console.log(error);
            }
        }
        fetchData();
    }, [])

    return (
        <div>
            <ul>
                {products.map(item=>(
                    <ListItem 
                        key={item.id}
                        title={item.title}
                        price={item.price}
                        onHandleClick={()=>addToCart(item)}
                    />
                ))}
            </ul>  
        </div>
    );
}

修改后的购物车页代码

//cart page
'use client'
import React, { useContext, useEffect } from 'react'
import { CartContext } from '../context/cartContext'
import LiCart from '../components/LiCart';

export default function Page() {
    const {cart} = useContext(CartContext);

    useEffect(()=>{
        console.log(cart);
    }, [cart])

    return (
        <div>
            <ul>
                {cart.map(item => (
                    <LiCart 
                        key={item.id}
                        title={item.title}
                        price={item.price}
                    />
                ))}
            </ul>
        </div>
    )
}

2. 优化addToCart中的状态更新日志（可选） #

如果需要在添加商品后立即查看最新的购物车状态，可以修改addToCart函数，直接打印新创建的数组：

//cartContext.jsx中修改addToCart
const addToCart = (item) => {
    const newCart = [...cart, item];
    setCart(newCart);
    console.log("funciona");
    console.log(newCart); // 打印最新的购物车状态
}

或者在组件中通过useEffect监听状态变化：

// 在产品页或其他使用cart的组件中
useEffect(() => {
    console.log('当前购物车状态:', cart);
}, [cart]);

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