Как вы сохраняете данные в состоянии с реагированием и локальным хранилищем?

Question

В настоящее время при создании корзины покупок один компонент содержит товары. В onClick (добавить в корзину) я добавляю элемент в локальное хранилище, а затем в другом компоненте извлекаю и отображаю элементы из локального хранилища.

My текущая настройка работает, но при обновлении sh и новой, когда добавляется новый элемент, она перезаписывает старые данные. Я предполагаю, что на refre sh состояние сбрасывается до пустого. Как бы вы реализовали данные для сохранения с или без состояния?

class ProductsContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
    this.addToCart = this.addToCart.bind(this);
  }

  addToCart = (item) => {
    let productList = this.state.products;
    productList.push({ img: item.img, name: item.name, price: item.price });
    this.setState({ products: productList });
    localStorage.setItem("products", JSON.stringify(productList));
  };

...
...
...

render(){
  return(
    <button className="add-item" onClick={() => this.addToCart(item)}>
  )
});

class ShoppingCart extends Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
  }

  componentDidMount() {
    const allProducts = localStorage.getItem("products");
    this.setState({ products: JSON.parse(allProducts) });
  }

...
...
...

}

Answer 1

кажется, что вы перезаписываете продукты в локальном хранилище , когда страница обновляется, и вы пытаетесь добавить новый массив, чтобы избежать небольшой проверки для локальное хранилище перед заменой предыдущего массива:

const products = JSON.parse(localStorage.getItem("products"));
if (products) localStorage.setItem("products", JSON.stringify([...products, product]));
else localStorage.setItem("products", JSON.stringify([product]));