React中Cookie存储购物车数据刷新丢失问题求解

你的问题出在两个核心点：初始化state时没有从Cookie读取已有数据，以及每次组件渲染都会用空数组覆盖Cookie。以下是具体修复步骤：

1. 修复_app.js的核心问题 #

问题分析 #

• 你直接在组件顶层调用setCookie('key', JSON.stringify(card), ...)，组件每次渲染（包括刷新页面初始化时）都会执行这段代码，初始card是空数组[]，因此会直接把Cookie重置为空。
• 没有从Cookie读取已保存的购物车数据作为state的初始值，导致刷新后state回到初始空数组。

修改后的_app.js代码 #

import Layout from '../components/layout';
import { useState, createContext, useEffect } from 'react';
import AppContext from '../components/AppContext';
import '../styles/globals.css';
import { getCookie, setCookie } from 'cookies-next';

export default function MyApp({ Component, pageProps }) {
  // 从Cookie读取已保存的购物车数据，作为初始值
  const savedCart = getCookie('key');
  const initialCart = savedCart ? JSON.parse(savedCart) : [];
  
  // 初始化count：取购物车中最大的id+1，避免新商品id重复
  const initialCount = initialCart.length 
    ? Math.max(...initialCart.map(item => item.id)) + 1 
    : 0;

  const [count, setcount] = useState(initialCount);
  const [card, setcard] = useState(initialCart);
  const [cartp, setcartp] = useState('');

  // 只有当购物车数据变化时，才更新Cookie
  useEffect(() => {
    setCookie('key', JSON.stringify(card), { path: '/', maxAge: 60 * 60 * 24 });
  }, [card]);

  return (
    <div>
      <AppContext.Provider
        value={{
          count,
          setcount,
          card,
          setcard,
          cartp,
          setcartp,
        }}
      >
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AppContext.Provider>
    </div>
  );
}

2. 修改点说明 #

• 从Cookie初始化state：页面加载时先读取Cookie中的购物车数据，解析后作为card的初始值；同时根据已有商品的id计算count的初始值，避免新增商品id重复。
• 用useEffect监听购物车变化：只有当card数据改变时，才调用setCookie更新Cookie，避免每次渲染都覆盖Cookie。

3. 验证效果 #

修改后：

• 刷新页面时，会从Cookie读取之前保存的购物车数据，state自动恢复，购物车不会清空。
• 添加商品到购物车时，card变化触发useEffect，自动更新Cookie保存最新数据。

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