estoy realizando un pequeño proyecto de estudio para aprender ReactJs. Se trata de un simulador de carrito de compras, donde se muestra dentro de un componente padre dos componentes, uno que muestra los productos agregados, y otro que despliega una lista de productos obtenidos desde una API (los cuales son obtenidos y guardados en el State por el componente padre que engloba a ambos).
Sucede que cuando agrego la primer unidad de cualquiera de los items no hay problema, pero cuando un Item se repite mas de una vez, en el array que almacena los productos del carrito en el state, todos los items ya guardados se transforman en undefined. Ya he debuggeado el codigo y sucede lo del comportamiento, la primer vez que se agrega algo marcha bien, luego explota.
Les presento el codigo correspondiente
import React, { Component } from "react";
import Producto from "./../../components/Producto";
import CarritoList from "./../../components/CarritoList";
import Layout from "./../../components/Layout";
import { getProducts } from "../../librerias-utils/services";
import { addToCart } from "../../librerias-utils/utils";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = { products: [], productosCarrito: [] };
}
componentDidMount() {
getProducts()
.then(response => {
console.log(this.state.productosCarrito);
this.setState({ products: response.data });
})
.catch(error => {
alert("Error al cargar los productos.");
});
}
// ACA SE ARMA EL LIO
addToCarrito = idProducto => {
debugger;
let { productosCarrito, products } = this.state;
let item = products.find(p => p._id === idProducto);
let cart = Array.from(addToCart(productosCarrito, item));
this.setState({ productosCarrito: cart });
console.log(this.state.productosCarrito);
};
render() {
const { products, productosCarrito } = this.state;
const { handleShow } = this.props;
return (
<div>
<div className="row d-block">
<Layout handleShow={handleShow} />
</div>
<div className="d-block"></div>
<div className="row">
<div className="col-3 float-right">
<CarritoList productosCarrito={productosCarrito} />
</div>
<div className="row col-9">
{products.map((p, index) => (
<Producto
className="col-4"
key={index}
idProd={p._id}
name={p.name}
description={p.description}
price={p.price}
photo={p.photo}
addToCarrito={this.addToCarrito}
/>
))}
</div>
</div>
</div>
);
}
}
Los demás componentes son: Producto:
import React, { Component } from "react";
export default class Producto extends Component {
constructor(props) {
super(props);
}
render() {
const style = {
"border-style": "groove",
"border-radious": "14px",
};
const {name,photo,price,description,idProd,addToCarrito} = this.props;
return (
<figure className="h-30 col-4" style={style}>
<img className="img-fluid rounded h-40 w-100" alt={name} src={photo} />
<figcaption>
<h4>{name}</h4>
<h5>${price}</h5>
<p>{description}</p>
<button
className="btn btn-primary mb-2 mx-auto"
onClick={evt => addToCarrito(idProd)}
>
Agregar
</button>
</figcaption>
</figure>
);
}
}
CarritoList:
import React, { Component } from "react";
import ProductoCarrito from "./ProductoCarrito";
export default class CarritoList extends Component {
constructor(props) {
super(props);
}
finalPrice = () => {
let { productosCarrito } = this.props;
let finalP = 0;
productosCarrito.forEach(p => {
finalP += p.price * p.quantity;
});
return finalP;
};
render() {
const { productosCarrito } = this.props;
const precioFinal = this.finalPrice();
const style = {
"color": "white",
"background-color": "black",
"height":"100%"
};
return (
<div className="pl-2" style={style}>
<div><h5>Items seleccionados</h5><hr/></div>
{productosCarrito.map((p, index) => (
<ProductoCarrito
key={index}
name={p.name}
quantity={p.quantity}
price={p.price}
/>
))}
<div>Total: ${precioFinal.toFixed(2)}</div>
</div>
);
}
}
ProductoCarrito:
import React, { Component } from "react";
export default class ProductoCarrito extends Component {
constructor(props) {
super(props);
}
render() {
const { name, quantity, price } = this.props;
const style = {"color":"white"}
return (
<div>
<div>
<label><b>{name}:</b></label><br/> {quantity} unidad/es = ${quantity * price}
</div>
<div>
<hr style={style}/>
</div>
</div>
);
}
}
Layout:
import React, { Component } from "react";
export default class Layout extends Component {
constructor(props) {
super(props);
}
render() {
const styleIn = {
"background-color": "black",
padding: "10px"
};
const { handleShow } = this.props;
return (
<div style={styleIn} className="d-flex mb-2 h-08">
<button onClick={() => handleShow("login")} className="btn btn-primary ml-auto">
Salir
</button>
<br />
</div>
);
}
}
Y la clase que utilizo ( para no repetir n veces el mismo objeto en el carrito, esta tiene las mismas propiedades de Item solo que agrega la propiedad quantity para ir sumandole 1 ).
export default class CartItem{
constructor(_id,name,description,price,photo){
this._id = _id;
this.name = name;
this.description = description;
this.price = price;
this.photo = photo;
this.quantity = 1;
}
}
y la función auxiliar para modificar la lista del carrito que esta en una libreria aparte.
const addToCart = (cart, item) => {
if(cart.find(p => p._id === item._id )){
cart = cart.map(p => { if(p._id === item._id) p.quantity++ });
}else{
let newItem = new CartItem( item._id, item.name, item.description, item.price, item.photo );
cart.push(newItem);
}
return cart;
};