Je crée un panier avec des crochets de réaction qui ressemble à ceci
[{id: 1, name:'Product 1', price: 2500}]
Les lignes commentées sont certaines des choses que j'ai essayées et qui n'ont pas fonctionné. Également essayé sans le deuxième argument [i] dans la fonction lamda de la carte.
J'essaye d'ajouter un produit à l'objet panier après qu'un utilisateur clique sur le bouton
Le l'état attendu du panier, par exemple si l'utilisateur clique sur le bouton à côté du produit avec l'identifiant d'un serait
const ShoppingCart = () => {
const [products, setProducts] = useState([
{id: 1, name: 'Product 1', price: 2500},
{id: 2, name: 'Product 2', price: 2000},
{id: 3, name: 'Product 3', price: 2500},
])
const [cart, setCart] = useState()
const addToCart = (item) => (
setCart([cart, {item}])
// setCart([...cart, {item}])
// setCart([{item}])
)
return (
{
products.map((product, i) => (
<>
<Product name={product.name} price={product.price} key={product.id} />
<button
value='Add to cart'
// onClick={((product) => setCart(...cart, product))}
onClick={(product) => addToCart(product)}
// onClick={console.log(i)}
/>
{console.log(cart)}
</>
))
}
)
}
Si cela était possible, j'aimerais également en ajouter un autre champ à l'objet qui serait montant
3 Réponses :
utilisez onClick = {((product) => setCart ([... cart, product]))}
Définissez la valeur initiale du panier
const addToCart = item => {
const ndx = cart.findIndex(e => e.id === item.id);
if (ndx === -1) {
setCart([...cart, item]);
}
};
retirez produit du rappel passé à onClick car ce n'est pas le produit, c'est l ' événement de clic
const addToCart = item => {
setCart([...cart, item]);
};
et l'opérateur de diffusion devraient fonctionner correctement
<button value="Add to cart" onClick={() => addToCart(product)} />
MODIFIER
si vous souhaitez ajouter l'article une seule fois, vérifiez d'abord s'il existe dans le panier:
const [cart, setCart] = useState([]); // [] is the initial value of the cart
C'est exactement ce qu'il fallait!
Merci beaucoup
Connaissez-vous un moyen d'ajouter une vérification si un élément existe déjà dans le tableau?
donc vous n'ajouterez pas l'élément asme deux fois?
Il est possible d'ajouter deux fois la même chose, mais cela devrait apparaître comme 2x, 3x, etc. en fonction du montant et également lire la longueur du tableau, y compris la quantité d'articles dans des articles tels que {cart.length} dans le panier < / p>
veuillez utiliser ... cart dans votre fonction addToCart car le panier serait le tableau de données précédent et quand vous le faites [... cart, item] alors le tableau précédent fusionnerait dans un nouveau tableau et y ajouterait un nouvel objet de produit nouveau tableau.
onClick={() => addToCart(product)}
et veuillez ne pas passer de paramètre à votre fonction de rappel de clic car vous obtenez ce produit par le haut et non par la fonction de clic. utilisez une fonction anonyme comme celle-ci
const addToCart = (item) => (
setCart([...cart,item])
)
Merci beaucoup
Connaissez-vous un moyen d'ajouter une vérification si un élément existe déjà dans le tableau?
vous pouvez utiliser array.includes pour vérifier si cette valeur existe un tableau ou non
Vous devez définir l'état initial, même s'il ne s'agit que d'un tableau vide: const [cart, setCart] = useState ([])