así que logré agregar el producto de ProductDescriptionPage al carrito pero sin sus atributos seleccionados (que son entradas de botones de opción por cierto). Entonces, ¿tiene alguna idea de cómo agregarlos con los atributos seleccionados y mostrarlos en el componente Carrito con los mismos atributos seleccionados? ¿Tengo que usar formularios?
addProduct = (product) => { this.setState({ cart: [...this.state.cart, product], cartItems: this.state.cartItems + 1 }) console.log(this.state.cartItems); } <div className="details"> <h1 className='name'>{product.name}</h1> {product.attributes.length > 0 && <> {product.attributes.map((attribute, i) => { return ( <> <p className='attributeBold' key={attribute}> {attribute.name}: </p> <ul className={`attributesList ${attribute.id}`} key={attribute.id}> {product.attributes[i].items.map((item) => { return ( <li> <input type="radio" id={`attribute ${item.id}`} name={`attributesList ${attribute.id}`} key={item.id} value={item.displayValue}/> <label className={`attribute ${item.id}`} style={{backgroundColor: item.value}} for={`attribute ${item.id}`}>{item.displayValue}</label> </li> ) })} </ul> </> ) })} </> } <div className="price">PRICE <p className='priceAmount'><span className='priceSymbol'>{product.prices[0].currency.symbol}</span>{product.prices[0].amount}</p> </div> <button className="addToCart" onClick={() => this.props.data.addProduct(product)}>ADD TO CART</button>Cuando el estado se actualiza usando su valor anterior, se debe usar el argumento de devolución de llamada. Esto se debe a la naturaleza asíncrona de las actualizaciones de estado.
Consulte https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
Debería ser:
this.setState((state)=>({ cart: state.cart.concat( state.currentProduct) })); Para establecer atributos para el producto, haga que currentProdcut parte del estado. Restablezca a nulo cuando se agregue al carrito.
Para cada uno de los atributos, cree un botón de radio con un oyente onChange correspondiente. En el oyente (después de vincular this ), llame a setState para actualizar currentProduct .
Por ejemplo, para el color:
render interior,
['red','blue','green','yellow'].map((color,i)=> ( <> <input type="radio" onChange={this.handleColorChange} id={color} value={color} /> <label htmlFor={color}>{color}</label> </> }) handleColorChange = (evt)=> { this.setState((state)=>( var {currentProduct} = state; currentProduct.color = evt.target.value; return currentProduct; }); }Repita lo mismo para otros atributos.