как добавить в React более одного продукта через локальное хранилище в корзину?

Question

Я работаю над проектом электронной коммерции с React, где, нажав на нужный продукт, он сохраняется через localStorage.setItem, а затем всегда отображается через localStorage.getItem в компоненте корзины. Все хорошо, пока я не нажму другой продукт. Бывает, что вместо добавления его в корзину с ранее выбранным товаром он заменяет его. Как я могу добавить более одного продукта?

//component "HomeProduct.js" in which I show the products
export const data = {
    "products":[
        {
            "id": 8,
            "img": "img1",
            "img2": "img2",
            "img3": "img3",
            "name": "Product Name1",
            "price": 265.90,
            "description": "Lorem ipsum dolor sit amet, consectetur."
        },
        {
            "id": 9,
            "img": "img1",
            "img2": "img2",
            "img3": "img3",
            "name": "Product Name2",
            "price": 695.99,
            "description": "Lorem ipsum dolor sit amet, consectetur.",
        }
    ]
}
class HomeProduct extends React.Component{    
    render(){
        return(
            <>
            {data.products.map((products, key) => 
                <Link to={{ 
                    pathname: `/Product/${products.id}`,
                    state: products
                    }}>  
                    <Button key={key}>
                        <Image src={products.img}/>
                        <span>{products.name}</span>
                        <span>${products.price}</span>
                    </Button> 
                </Link>              
            )} 
            </>                
        )
    }
}export default HomeProduct;

//"ProductItem.js", component of "Product.js" in in which 
//the product details are shown and the button to put it in the cart

class ProductItem extends React.Component{
    render(){      
        const {location} = this.props      
        function addProductToCart() {
            localStorage.setItem('id', location.state.id);
            localStorage.setItem('name', location.state.name);
            localStorage.setItem('price', location.state.price);
            localStorage.setItem('img', location.state.img);
            localStorage.setItem('description', location.state.description);
          }
        return(
            <>            
            <Row id={location.state.id}>
                    <Col>                        
                         <div>
                         <img src={location.state.img}/>
                         </div>
                         <div>
                         <img src={location.state.img2}/>
                         </div>
                         <div>
                         <img src={location.state.img3}/>
                         </div>                        
                    </Col>
                    <Col>
                       <h1>{location.state.name}</h1>                                                                      
                       <h1>${location.state.price}</h1>
                    </Col>                       
                    <Col>
                       <p>{location.state.description}</p>
                    </Col>                                    
                    <Button                                       
                         onClick={addProductToCart}
                     >Add to Cart</Button>            
                </Row>               
            </>  
        )
    }    
}export default withRouter(ProductItem);

//"CartProduct.js", component of the cart
export const showProduct = () => {
    localStorage.getItem('id');
    localStorage.getItem('name');
    localStorage.getItem('price');
    localStorage.getItem('img');
    localStorage.getItem('description');
} 
export const  CartProduct = () =>(
    (localStorage.getItem('id') !== null) ? (       
        <>
        <Row id={localStorage.getItem('id')}>
            <Col>
                <img src={localStorage.getItem('img')}/>
            </Col>
            <Col>
                <h4>{localStorage.getItem('name')}</h4>
                <span>{localStorage.getItem('description')}</span>
                <h4>${localStorage.getItem('price')}</h4>
            </Col>
            <Col>
            <Form>
             <Form.Row >
             <Form.Group>
              <Form.Control type="number" defaultValue="1" min="1" count="1"/>
              </Form.Group>
              </Form.Row>
             </Form>                                
            </Col>                               
        </Row> 
        </>
        ):(
            <span/>
        )
    )
export default withRouter(CartProduct);
`

Answer 1

Мне удалось добавить более одного продукта, части кода, которые мне пришлось изменить, следующие:

//ProductItem.js     
    const {location} = this.props      
    function addProductToCart() {
        const oldproduct = localStorage.getItem('products') ? localStorage.getItem('products') : "[]";
        const arrayproduct =  JSON.parse(oldproduct);  
        let productsString = data.products;
        let products = location.state

        arrayproduct.push(products);
        if(productsString){
            products = JSON.parse(productsString)
        }

        localStorage.setItem('products', JSON.stringify(arrayproduct));                   
    }  

Мне также пришлось задействовать основной компонент, который содержал CartProduct:

//Shopping.js
export default class Shopping extends Component{ 
componentDidMount(){
    const products =  JSON.parse(localStorage.getItem('products'));
    this.setState({products});    
}
render(){
    const products =  JSON.parse(localStorage.getItem('products'));        
    return(                       
          {products.map((product, key) =>
             <CartProduct key={key} data={product}/> 
            )}   
    )
}

//CartProduct.js
class CartProduct extends React.Component{    
render(){  
    return(
    (localStorage.getItem('products') !== null) ? (                   
        <> 
        <Row>
            <Col>
                <img src={this.props.data.img}/>
            </Col>
            <Col>
                <h4>{this.props.data.name}</h4>
                <span>{this.props.data.description}</span>
                <h4>${this.props.data.price}</h4>
            </Col>
        </>
        ):(
            <span/>
        )
    )
}}export default withRouter(CartProduct);

Answer 2

Здесь происходит то, что вы переопределяете ключ, в котором храните продукт.Если вы делаете localStorage.setItem('id', something) и после localStorage.setItem('id', otherThing).Когда вы делаете localStorage.getItem('id'), вы получите otherThing, потому что оно переопределяется, когда вы устанавливаете элемент на something.

В localStorage, вы можете иметь только уникальные ключи.Не может быть более одного значения для одного и того же ключа.

Чтобы сохранить более одного продукта, нужно сохранить продукты в виде массива.

function addProductToCart() {
    let productsString = localStorage.getItem('products')
    let products = []
    if(productsString){
        products = JSON.parse(productsString)
    } 
    products.concat([location.state])
    localStorage.setItem('products', JSON.stringify(products)) // set products as an array
}

И при получении продуктавы получаете полный массив со всеми продуктами.

const showProduct = () => {
    localStorage.getItem('products'); // gets an array of the products
} 

И если вы хотите получить последний продукт, вы должны сделать

const getLastProduct = () => {
    let productString = localStorage.getItem('products')
    let products = JSON.parse(productString)
    return products[products.length - 1]
}

Вы должны заметить, что вы должны сохранить массивиспользуя JSON.stringify и получите его используя JSON.parse.