cuando agrego un producto en el carrito, no se muestra nada en el automóvil y se muestra el error "elementos no encontrados" en la pantalla y cuando trato de usar la verificación nula y el inicio de npm, no se muestra el error, pero aún se muestra la página balnk.
import React from 'react'; import Header from './Front/Header/Header'; const Cart = ({ cartitems ,handleAddProduct,handleRemoveProduct} ) => { return ( <> <Header /> <div className="cart-items"> <div className="cart-items-header"> cartitems</div> {!cartitems?.length ? ( <div className="cart-items-empty"> No items added in cart</div> ) : null} <div> {cartitems?.length ? cartitems.map((item,name ,price ,image ,id) => ( <img key={item.id} className="cart-items-image" src={item.image} alt={item.name} /> )) : null} </div> <div> <h3 className='cart-items-name'> {item.name}</h3> </div> <div className='cart-items-function'> <button className='cart-items-add' onClick={() =>handleAddProduct(item)}> + </button> <button className='cart-items-remove' onClick={()=>handleRemoveProduct(item)}> - </button> </div> <div className='cart-items-price'> {item.quantity}* ${item.price} </div> </div> </> ); } export default Cart;Creo que hay 2 problemas en tu código:
En primer lugar, supongo que cada item de su cartitems tiene la siguiente estructura:
artículo = { id: 1, nombre: "mi artículo", precio: 2, imagen: "http://mybeautifulurl.org/image.png" }
Si ese es el caso, debe pasar el item como el único argumento en la función de map y acceder a cada accesorio con item.id , item.name , item.price y item.image .
map pero necesita el item , por lo que no puede mostrar nada.Aquí está su código actualizado:
import React from "react"; import Header from "./Front/Header/Header"; const Cart = ({ cartitems, handleAddProduct, handleRemoveProduct }) => { return ( <> <Header /> <div className="cart-items"> <div className="cart-items-header"> cartitems</div> {!cartitems?.length ? ( <div className="cart-items-empty"> No items added in cart</div> ) : null} <div> {cartitems?.length ? cartitems.map((item) => ( <> <img key={item.id} className="cart-items-image" src={item.image} alt={item.name} /> <div> <h3 className="cart-items-name">{item.name}</h3> </div> <div className="cart-items-function"> <button className="cart-items-add" onClick={() => handleAddProduct(item)} > + </button> <button className="cart-items-remove" onClick={() => handleRemoveProduct(item)} > - </button> </div> <div className="cart-items-price"> {item.quantity}* ${item.price} </div> </> )) : null} </div> </div> </> ); }; export default Cart;Déjame saber si esto resuelve el problema :)