您如何通过 react 和本地存储将数据保持在状态？答案

【问题标题】：How do you persist data in state with react and local storage?您如何通过 react 和本地存储将数据保持在状态？
【发布时间】：2020-08-17 10:36:05
【问题描述】：

目前正在构建一个购物车，一个组件保存产品，onClick(add to cart) 我将项目添加到本地存储，然后在另一个组件中检索并显示本地存储中的项目。

我当前的设置在刷新时有效，并且在添加新项目时会覆盖旧数据。我假设在刷新状态重置为空。您将如何实现数据以在有或没有状态的情况下持久存在？

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) });
  }

...
...
...

}

【问题讨论】：

标签： javascript reactjs local-storage

【解决方案1】：

当页面刷新并尝试添加新数组时，您似乎正在覆盖 本地存储 中的产品，以避免您可以做一些检查到本地存储，然后再替换之前的数组：

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

【讨论】：