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 中处理这个问题比普通的 React 糟糕得多。我会很高兴知道我做错了什么。

Answer 1

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

  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]);