when page reloads items from my cart are not saved

Question

I'm working on a simple shopping website with React.

I have a problem that every time I add an item to the cart and then go to a different section of the website the page reloads and I lose all the data saved in the cart.

I am not sure if the problem is because of the page reload?

Which is the best approach to try solve this? I'm using react routing.

// indes.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import RouteSwitch from "./components/RouteSwitch";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouteSwitch />
  </React.StrictMode>
);

-------------------------------------------------------------------------------------------------

// RouteSwitch.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Shop from "./Shop";
import About from "./About";
import { useEffect, useState } from "react";
import Cart from "./Cart";

const url = "https://fakestoreapi.com/products";

const RouteSwitch = () => {
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState([]);

  const getProducts = async () => {
    try {
      const response = await fetch(url);
      const productsList = await response.json();
      setProducts(productsList);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  console.log(cart);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route
          path="/shop"
          element={<Shop products={products} setCart={setCart} />}
        />
        <Route path="/about" element={<About />} />
        <Route path="/cart" element={<Cart cart={cart} />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RouteSwitch;

-------------------------------------------------------------------------------------------------

// Shop.js (page with all the products)

import React from "react";
import Footer from "./Footer";
import Header from "./Header";

export default function Shop(props) {
  const products = props.products;
  const setCart = props.setCart;

  const addToCart = (product) => {
    setCart((current) => [...current, product]);
  };

  return (
    <>
      <Header />
      <div className="shop__product-list">
        {products.map((product) => {
          return (
            <div className="product-container" key={product.id}>
              <div className="product-desc-top">
                <img
                  className="product-img"
                  alt={product.title}
                  src={product.image}
                />
              </div>
              <div className="product-desc-bottom">
                <p>{product.title}</p>
                <p>${product.price}</p>
                <button
                  className="product-add-to-cart"
                  onClick={() => addToCart(product)}
                >
                  ADD TO CART
                </button>
              </div>
            </div>
          );
        })}
      </div>
      <Footer />
    </>
  );
}

You could save the cart to localStorage and retrieve it whenever the page refreshes, what's happening is that your state is refreshing when switching routes, if you want to keep using React Router you should do that — Benjamin Bialy, Jul 07 '22 at 01:48
This will probably help you https://stackoverflow.com/questions/70832675/losing-usestate-value-on-refresh-in-react-js — PsiKai, Jul 07 '22 at 01:48

score 1 · Answer 1 · edited Jul 07 '22 at 08:49

You have to use LocalStorage to save your state.

const getLocalStorage = () => {
  const userData = localStorage.getItem('cartdata')
  if (cartData) {
    return JSON.parse(cartData)
  } else {
    return []
  }
}

const [cart, setCart] = useState(getLocalStorage())

const addToCart = (product) => {

  setCart((current) => {
    localStorage.setItem('cartdata', JSON.stringify([...current,product]))
    return [...current, product]
  );
};

score 0 · Answer 2 · answered Jul 07 '22 at 01:48

You are saving the products in the state which is memory cache. Every time you reload the page javascript will garbage collect all the data (wipe it out), so you loose it.
The best way to solve it is to store products added to the cart to the database, which requires backend logic and the database.
If this is not real production site you can store the data to local storage and sync it with your state.

Poker Player · Answer 3 · 2022-07-07T02:03:51.200

0

I advise you to use localStorage or Cookies.

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

React.useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(cart)) // create
}, [cart])

then on the page where you want to get the items

JSON.parse(localStorage.cart) // data

edited Jul 07 '22 at 02:03

answered Jul 07 '22 at 01:54

Poker Player

146
1
4

when page reloads items from my cart are not saved

3 Answers3