React useContext数据传递异常：购物车页面items数组为空

你的核心问题是：使用useContext实现购物车时，添加商品能打印正确数据，但跳转到购物车页面后items数组始终为空。主要原因是状态更新时的闭包问题，以及可能存在的页面刷新导致状态丢失的情况，以下是具体修复步骤：

1. 修复购物车状态更新逻辑 #

原addToCart函数直接依赖cartItems变量，会因闭包问题获取到旧的状态值，导致状态更新不生效。改为函数式更新，确保每次都获取最新的购物车状态：

修改CartContext.jsx中的addToCart和removeFromCart函数：

import React, { createContext, useState } from 'react';

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);

  // 使用函数式更新获取最新状态
  const addToCart = (item) => {
    setCartItems(prevCartItems => [...prevCartItems, item]);
  };

  const removeFromCart = (itemId) => {
    setCartItems(prevCartItems => prevCartItems.filter((item) => item.id !== itemId));
  };

  const cart = {
    items: cartItems,
    addToCart,
    removeFromCart,
  };

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

2. 确保单页导航避免状态丢失 #

如果添加商品后是手动刷新页面跳转，React内存中的状态会被清空。在Produit-card.tsx的sendToCart函数中添加单页导航代码，确保状态不会丢失：

const sendToCart = (id: number) => {
  const item = {
    id: produit.id,
    name: produit.name,
    price: produit.prix,
    quantity: valeure,
  };
  console.log(item);
  cart.addToCart(item);
  navigate('/panier'); // 添加单页导航，避免刷新页面
};

3. 验证Context导入路径一致性 #

确保Panier.tsx和Produit-card.tsx中导入CartContext的路径正确，避免因路径错误导致使用不同的Context实例：

• Panier.tsx：import { CartContext } from '../components/CartContext';
• Produit-card.tsx：import { CartContext } from './CartContext';

当前路径符合目录结构（Produit-card.tsx在components目录，Panier.tsx在pages目录），无需修改。

完成以上修改后，点击添加商品按钮，会自动跳转到购物车页面，此时items数组会正确显示已添加的商品，即可正常遍历渲染购物车列表。

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