localStorage gets reset after button click ReactJS

Question

I'm currently experiencing an issue where local storage is reset after trying to add an item that belongs to a different page(ex shown below) to the local storage. The local storage functionality is being used for a shopping cart feature.

It all works well when I try adding items from the same category, but once I switch the the category the local storage is reset.

A weird behavior that I also noticed is that for the first item that I try to add to the cart, I have to double click it for it to register in the local storage.

I've set the program so that only the shopping cart page needs to access the local storage.

Adding product from "Wearables category"

Going back and into the Items in the "Computers" section. Ignore sidebar

Adding item from wearable section and local storage is cleared.

Code: App.js

class App extends Component {
  userData;
  constructor(props) {
    super(props);

    this.state = {
      cart: [],
    };

    this.handleAddToCart = this.handleAddToCart.bind(this);
  }

  handleAddToCart = (productId, prodName, description, price) => {
    console.log(" Handle Add to Cart Called ", productId);
    console.log("->cart state: ", this.state.cart);
    const holder = {
      productId,
      quantity: 1,
      prodName,
      description,
      price,
    };

    const idx = this.indexOfProduct(productId);

    if (idx == -1) {
      // Product does not exist in cart
      this.setState(
        {
          cart: [...this.state.cart, holder],
        },
        () => {
          console.log("Updated Cart: ", this.state.cart);
        }
      );
    } else {
      let newArray = [...this.state.cart];
      newArray[idx] = {
        ...newArray[idx],
        quantity: newArray[idx].quantity + 1,
      };
      this.setState(
        {
          cart: newArray,
        },
        () => {
          console.log("Updated Cart: ", this.state.cart);
        }
      );
    }
    localStorage.setItem("cart", JSON.stringify(this.state.cart));
  };

  indexOfProduct(productId) {
    for (let index = 0; index < this.state.cart.length; index++) {
      if (this.state.cart[index].productId == productId) return index;
    }
    return -1;
  }

  render() {
    return (
      
        {/* 
          
         */}
        <>
          
            
              
            

            
              
                
              
              
                
              
              
                
              
              
                {/*onAddToCart={this.handleAddToCart} */}
                
              

              
                
              

              
                
              
              
                
              
            
          
        
        
      
    );
  }
}

export default App;

ShoppingCartComponent.jsx

class ShoppingCartComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cart: [],
    };
    console.log("Hello Im the constructor");
  }
  static getDerivedStateFromProps(props, state) {
    console.log("Hello Im the dState Func");

    const sCart = localStorage.getItem("cart");
    const parsedCart = JSON.parse(sCart);

    if (sCart == null) {
      return { cart: [] };
    } else {
      console.log("cart String mount on shopping cart: ", sCart);
      console.log("cart Object at mount on shopping cart: ", parsedCart);
     

      return { cart: parsedCart };
      console.log("After appending", this.state.cart);
    }
  }


  render() {
    console.log("Shopping Cart Array at Render(): ", this.state.cart);
    return (
      
        
          
            
              
                

                
              
              
              Shopping cart
              
                
                  You have {this.state.cart.length} items in your cart
                
                
                  Sort by:
                  
                    price
                    
                  
                
              

              {this.state.cart.map((product) => (
                
                  
                    
                    
                      
                        {product.prodName}
                      
                      256GB, Navy Blue
                    
                  

                  ...

ProductGridComponent.jsx //Where the products per categories are displayed. Sidebar is a separate component.

class ProductGridComponent extends Component {
  constructor(props) {
    super(props);

    const windowUrl = window.location.pathname.substring(1);
    console.log("window url: ", windowUrl);

    this.state = {
      category: windowUrl.substring(windowUrl.indexOf("/") + 1), //Please fix me, I am vulnerable to SQL Injection
      products: [],
    };
    console.log(this.state.category);

    this.handleShopButtonClick = this.handleShopButtonClick.bind(this);
  }
  componentDidMount() {
    ProductService.getProductsByCategory(this.state.category).then((res) => {
      this.setState({ products: res.data });
    });
  }
  handleShopButtonClick(productId) {
    this.props.history.push(`/product/${productId}`);
  }
  onAddClick() {}

  render() {
    return (
      <>
        {/*  */}
        
          
          
            {this.state.products.map((product) => (
              
                
                  
                    
                      
                      {product.vendorName}
                    
                  
                  
                    
                  
                  
                    {product.prodName}
                    ${product.price}
                  
                  
                    
                      
                    
                    
                      
                    
                  
                
              
            ))}
            {/*  */}
          
        
      
    );
  }
}

export default ProductGridComponent;

ProductViewComponent.jsx

class ProductViewComponent extends React.Component {
  constructor(props) {
    super(props);

    const windowUrl = window.location.pathname.substring(1);
    console.log("window url for product: ", windowUrl);

    this.state = {
      //id: this.props.match.params.id,
      id: windowUrl.substring(windowUrl.indexOf("/") + 1), //Please fix me, I am vulnerable to SQL Injection
      name: "",
      price: 0,
      vendor: "holder vendor",
      description: "",
    };
    console.log("ID: ", this.state.id);
  }

  componentDidMount() {
    ProductService.getProductById(this.state.id).then((res) => {
      let product = res.data;

      this.setState({
        name: product.prodName,
        price: product.price,
        vendor: product.vendorName,
        description: product.description,
      });
    });
  }

  render() {
    return (
...
  
...

creativeAxe · Accepted Answer

The issue was a logical error. On reload, the state(cart) becomes empty. However, I never set the state to the items already on local storage before trying add the new items to the cart. The way I did the adding functionality involves taking the current state and appending the new items, and then setting the local storage afterwards. Meaning that if the state is empty then then trying to add a new item this way will simply result in only the new item being on the cart.

I added this piece to App.js to solve the error.

componentDidMount() {
    const sCart = localStorage.getItem("cart");
    const parsedCart = JSON.parse(sCart);

    if (sCart == null) {
      this.setState({ cart: [] });
    } else {
      console.log("cart String mount on shopping cart: ", sCart);
      console.log("cart Object at mount on shopping cart: ", parsedCart);
      this.setState(
        {
          cart: parsedCart,
        }
      );
    }
  }

localStorage gets reset after button click ReactJS

Answers (2)

Related Questions