javascript - LocalStorage includes an empty array on every render

Question

I'm trying to update my localStorage with new items that are added to my shopping cart. However, every time an item is added, an empty array is added before it (see screenshot). Why is this?

I'm thinking I need to add a ternary operator to return an empty array if there are no existing items in the cart and to return the current items in the cart if there are items currently in localStorage. Is this correct, or do I have a syntax error?

Screenshot:

Code in question:

useEffect(() => {
  const newData = JSON.parse(localStorage.getItem('product')) || [];
  newData.push(cart);
  localStorage.setItem('product', JSON.stringify(newData));
}, [cart])

Full code:

import React, { useState, useEffect } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';

function Cart(props) {

    const [cart, setCart] = useState([]);
    const [quantity, setQuantity] = useState([]);
    const [loading, setLoading] = useState(false);

  useEffect(async () => {
  fetchItems();
}, [])

const itemId = props.match.params.id;
const itemQuantity = parseInt(props.match.params.qty, 10);
const fetchItems = async () => {
  const data = await fetch('https://fakestoreapi.com/products/' + itemId);
  const items = await data.json();
  setCart(items)
  setQuantity(itemQuantity)
  setLoading(true)
}

function price(qty){
  const newPrice = qty * cart.price;
  return newPrice.toFixed(2)
}

useEffect(() => {
  const newData = JSON.parse(localStorage.getItem('product')) || [];
  newData.push(cart);
  localStorage.setItem('product', JSON.stringify(newData));
}, [cart])

    return (
      <div>
        {loading ? (
          <div className="productStyle">
            <img src={cart.image} className="productImage"></img>
            <p>{cart.title}</p>

            <div className="quantity">
              <button className="btn minus-btn" type="button"
                onClick={quantity > 1 ? () => setQuantity(quantity - 1) : null}>-</button>
              <input type="text" id="quantity" placeholder={quantity}/>
              <button className="btn plus-btn" type="button"
                onClick={() => setQuantity(quantity + 1)}>+</button>
            </div>

            <p>${price(quantity)}</p>



          </div>
        ) : (<ReactBootStrap.Spinner className="spinner" animation="border" />)}
      </div>
    );
}

export default Cart;

question from:https://stackoverflow.com/questions/65927857/localstorage-includes-an-empty-array-on-every-render

Answer 1

You are fetching the initial cart content asynchronously, but are setting product to newData right away, i.e., before cart had any content, which means that newData only contains [].

Perhaps just replace newData.push(cart); with cart.length > 0 && newData.push(cart);? Or rethink your logic. Not sure what you want product to contain.