如何将Cookies作为Redux Toolkit的initialState？useSelector返回空对象

可能原因1：JSON解析失败 #

你提供的Cookies购物车数据存在语法错误：每个cartItem对象里的color字段后多了一个冗余逗号（比如"color": "beige",），这会导致JSON.parse抛出异常，最终cartItem fallback到空数组。

解决方法：

• 存入Cookies前确保JSON格式合法，删除所有 trailing comma
• 给解析逻辑增加错误捕获，避免解析失败直接清空数据：

let cartItem = [];
try {
  const cookieData = Cookies.get('cartItems');
  if (cookieData) {
    cartItem = JSON.parse(cookieData);
  }
} catch (err) {
  console.error('解析购物车Cookies失败:', err);
  // 可选：清理错误的Cookies
  Cookies.remove('cartItems');
}

可能原因2：useSelector取值路径错误 #

你的cartSlice的initialState是包含cart字段的对象，组件中取值时要确保路径正确：
错误写法（返回空对象）：

const cart = useSelector(state => state.cart); // 拿到的是整个slice的state对象，包含cart、quantity等字段

正确写法：

const cart = useSelector(state => state.cart.cart); // 精准取到slice里的cart数组

可能原因3：Cookies路径/域名不匹配 #

检查设置Cookies时的path和domain参数，确保当前页面能读取到：
设置Cookies时指定根路径，避免仅在子路径下可见：

Cookies.set('cartItems', JSON.stringify(cartData), { path: '/' });

额外验证步骤 #

1. 在cartSlice初始化时打印cartItem，确认是否正确读取到Cookies数据：

const cartItem = ...;
console.log('初始化购物车数据:', cartItem); // 查看控制台输出是否为预期数组

2. 打开浏览器开发者工具的Application面板，确认cartItems的Cookies值是合法JSON字符串

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