NextJS localStorage 和购物车的上下文答案

【问题标题】：NextJS localStorage and Context of Shopping CartNextJS localStorage 和购物车的上下文
【发布时间】：2022-07-08 02:37:22
【问题描述】：

我正在开发一个购物车系统，但问题是，当我将产品添加到购物车时，它在 context 和 localStorage 中工作；但是，当我刷新时，数据消失了。

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 糟糕得多。我很高兴知道我做错了什么。

【问题讨论】：

标签： next.js local-storage react-context

【解决方案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]);

【讨论】：

非常感谢，成功了！！

【解决方案2】：

非常感谢，我能够解决我的问题。使用下一个代码：

const initialState = []
const [carrito, setCarrito] = useState(initialState)

  useEffect(() => {
    const carritoLS = JSON.parse(localStorage.getItem('carrito'))
    if (carritoLS) {
      setCarrito(carritoLS)
    }
  }, [])

  useEffect(() => {
    if (carrito !== initialState){
      localStorage.setItem('carrito', JSON.stringify(carrito))
    }
  }, [carrito])

【讨论】：