浏览器刷新时，购物车值重置

Posted 2021-04-27

在ECommerce React项目中，我在单击时创建了购物车，更改为“在购物车中”，然后被禁用，这表明该产品在购物车中并且无法单击，但是当刷新浏览器时，购物车值重置为。

以下为代码参考

Product.js

export default class Product extends Component {
    render() {
        const {id, title, img, price, inCart} = this.props.product;
        const dataValue = JSON.parse(localStorage.getItem('myCart'))

        return (
            <ProductWrapper className="col-9 mx-auto col-sm-6 col-lg-3 my-3 " >
                <div className="card" >
                    <ProductConsumer>
                        {(value) => (
          <div  className="img-container p-3" >

         <img style={imageSize}  src={img} alt="product" 
         className="card-img-top center img-fluid img-responsive"/>


        <button className="cart-btn" disabled={inCart?true:false}
        onClick={() => {value.addToCart(id)}}> 
        {console.log('DATA VALUE', dataValue)}
        { inCart ? (
            <p className="text-capitalize mb-0" disabled>
            {" "}
            In Cart</p>
        ) : (
            <i className="fas fa-shopping-cart"/>
        )}
          </button>
        </div>)}
       </ProductConsumer> 
       </div> 
    </ProductWrapper>   
         );
    }

}

ProductList.js（产品列表）

export default class ProductList extends Component {

    render() {
        return (
            <React.Fragment>
                <ProductConsumer>
                 {value => {

             return value.products.map((product, key) => {
             return  <Product key={product.id} product={product} />;
                                      });
                                }}
                            </ProductConsumer>
            </React.Fragment>
        );
    }
}

App.js

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Route render={({location}) => (
                  <Switch location={location}>
                    <Route exact path="/" component={ProductList}/>
                  </Switch>
        )} />
      </React.Fragment>
    );
  }
}

export default App;

我已经尝试过localStorage，但是没有效果。可以做些什么使购物车值存储在localStorage中，以便在刷新时保留“购物车中”。有什么合适的解决方案吗？

下面是codeandbox链接：https://codesandbox.io/s/tdgwm

答案

<button
   className="cart-btn"
              disabled={inCart ? true : false}


              onClick={() => {
                value.addToCart(id);
                localStorage.setItem("added", "In Cart");
                console.log(localStorage.getItem("added"));
              }}
            >
              {localStorage === null ? (
                <i className="fas fa-shopping-cart" />
              ) : (
                <p className="text-capitalize mb-0" disabled>
                  {" "}
                  {localStorage.getItem("added")}
                </p>
              )}


            </button>

我快速浏览了一下。上面的代码将获取localStorage项目集并呈现购物车中的值。但是，我将留给您将其应用于单个产品并更新图标/购物车中的条件。如果您有任何问题，我会再待一会儿。但基本上，您需要在渲染之前查看是否已设置localstorage。