Nextjs Localstorage和购物车的上下文

Question

我正在开发一个购物车系统，问题是，当我向购物车中添加产品时，它在上下文和局部存储中起作用。但是，当我刷新时，数据就消失了。

export const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [cart, setCart] = useState([]);
  const [state, dispatch] = useReducer(AppReducer, cart);

  useEffect(() => {
    const cartData = JSON.parse(localStorage.getItem("cart"));
    if (cartData) {
      setCart(cartData);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));

    // Cookies.set("cart", cart, { expires: 1 / 24 });
    // let products = Cookies.get("cart");
    // console.log(products);
  }, [cart]);

  const addToCart = (newProduct) => {
    setCart((prev) => [...prev, newProduct]);
  };

  return (
    <DataContext.Provider value={{ cart, setCart, addToCart }}>
      {children}
    </DataContext.Provider>
  );
};

然后，我只是在我的产品详细信息页面中导入addtocart函数，然后将产品作为参数。

在Next.js中处理此问题比正常反应要差得多。我很高兴知道我做错了什么。

Answer 1

重新加载页面时，您的LocalStorage已被写入。尝试以下方法，以防止初始化时在本地存储中设置项目。

  const initialState = [];
  const [cart, setCart] = useState(initialState);

  useEffect(() => {
    const cartData = JSON.parse(localStorage.getItem("cart"));
    if (cartData) {
      setCart(cartData);
    }
  }, []);

  useEffect(() => {
    if (cart !== initialState) {
      localStorage.setItem("cart", JSON.stringify(cart));
    }
  }, [cart]);