محمود سعداوي2 نشر 22 مارس 2023 أرسل تقرير نشر 22 مارس 2023 السلام عليكم. أود تقديم إعتذاري عن أسئلتي الكثيرة التي أنا بصدد القيام بها. لو سمحتم، عند إضافتي لعنصر محدد تظهر لي popup تحتوي كل المنتجات التي قمت بإضافتها المشكل هو عند النقر على أيقونة الحذف يقع تعديل مستوى My Cart بينما لا يقع حذفها من المنتجات الكود الذي قمت به App.js // Remove From Cart const removeFromCart = (id) => { const removed = cartItems.filter(item => item.id !== id) setCartItems(removed) } Cart.jsx const [qtyArray, setQtyArray] = useState(cartProducts) // add quantity const handlePlus = (index) => { setQtyArray(prev => prev.map((item,id) => id+1 === index ? { ...item, qty: item.qty + 1 } : item)) } // minus quantity const handleMinus = (index) => { setQtyArray(prev => prev.map((item,id) => id+1 === index ? { ...item, qty: item.qty - 1 } : item)) } // calculate total price let totalPrice = qtyArray.reduce((acc, item) => (acc + item.qty * item.price), 0) return ( <div className='cart-modal'> { qtyArray.map((cartProduct,index) => ( <CartItem key = {index} cartProduct = {cartProduct} removeFromCart = {removeFromCart} handlePlus = {handlePlus} handleMinus = {handleMinus} /> )) } <div className="cart-summary"> <h2 className='cart-summary-title'>Total ---- {totalPrice.toFixed(3)} $</h2> <button type='button' onClick={()=>setModal(false)}>CLOSE</button> </div> </div> ) } CartItemjsx console.log(cartProduct.id) return ( <div className="cart-product" > <img src={cartProduct.image} alt="" srcSet="" /> <div className="cart-product-info"> <h3 className='cart-price'>{cartProduct.price}</h3> <div className="quantity"> <button type='button' className='plus' onClick={() => handlePlus(cartProduct.id)} >+</button> <h4 className='qty'>{cartProduct.qty}</h4> <button type='button' className='minus' disabled={cartProduct.qty < 2} onClick={() => handleMinus(cartProduct.id)} >-</button> <button type='button' className='remove'> <i className="fa-solid fa-trash" onClick={()=>removeFromCart(cartProduct.id)} ></i> </button> </div> <h2 className='total'>{(cartProduct.price * cartProduct.qty).toFixed(2)} $</h2> </div> </div> ) } شكرا لكم اقتباس
0 عمر قره محمد نشر 22 مارس 2023 أرسل تقرير نشر 22 مارس 2023 بتاريخ 2 ساعة قال محمود سعداوي: نعم قمت بذلك const cartProducts = cartItems.map(item => ({...item, qty:1})) const [qtyArray, setQtyArray] = useState(cartProducts) جرب إضافة الـ effect التالي والذي يقوم بتعديل الحالة setQtyArray عند كل تعديل على الحالة cartItems في اللمف Cart.jsx : useEffect(() => { const ids = cartItems.map((item) => { return item.id; }); const filteredCartItems = qtyArray.filter((item) => ids.indexOf(item.id) !== -1); setQtyArray(filteredCartItems); }, [cartItems]); 1 اقتباس
0 عمر قره محمد نشر 22 مارس 2023 أرسل تقرير نشر 22 مارس 2023 هل يمكنك مشاركة ملفات المشروع بالكامل ؟ 1 اقتباس
0 محمود سعداوي2 نشر 22 مارس 2023 الكاتب أرسل تقرير نشر 22 مارس 2023 بتاريخ 15 دقائق مضت قال عمر قره محمد: هل يمكنك مشاركة ملفات المشروع بالكامل ؟ تفضل ملفات الsrc src.zip اقتباس
0 Mustafa Suleiman نشر 22 مارس 2023 أرسل تقرير نشر 22 مارس 2023 أنت تستخدم مصفوفة cartItems لتخزين المنتجات في عربة التسوق، ولكن لا تمررها كمدخل لـ CartItem في Cart.jsx. بدلاً من ذلك، تم استخدام qtyArray، والذي يحتوي على قائمة من العناصر التي تم تعديلها بواسطة handlePlus و handleMinus. هذا هو السبب في أن الحذف لا يحدث في المصفوفة cartItems عند النقر على أيقونة الحذف. لحل هذه المشكلة، يمكنك تمرير cartItems كمدخل لـ CartItem في Cart.jsx بدلاً من qtyArray. وبمجرد النقر على زر الحذف، يجب عليك استدعاء دالة removeFromCart وإرسال cartProduct.id كمدخل لها. ثم يجب عليك تحديث المصفوفة cartItems باستخدام setCartItems وإزالة العنصر الذي تم حذفه. 1 اقتباس
0 محمود سعداوي2 نشر 22 مارس 2023 الكاتب أرسل تقرير نشر 22 مارس 2023 بتاريخ 5 دقائق مضت قال Mustafa Suleiman: لحل هذه المشكلة، يمكنك تمرير cartItems كمدخل لـ CartItem في Cart.jsx بدلاً من qtyArray. وبمجرد النقر على زر الحذف، يجب عليك استدعاء دالة removeFromCart وإرسال cartProduct.id كمدخل لها. ثم يجب عليك تحديث المصفوفة cartItems باستخدام setCartItems وإزالة العنصر الذي تم حذفه. نعم قمت بذلك const cartProducts = cartItems.map(item => ({...item, qty:1})) const [qtyArray, setQtyArray] = useState(cartProducts) 1 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
أود تقديم إعتذاري عن أسئلتي الكثيرة التي أنا بصدد القيام بها.
لو سمحتم،
عند إضافتي لعنصر محدد تظهر لي popup تحتوي كل المنتجات التي قمت بإضافتها
المشكل هو عند النقر على أيقونة الحذف يقع تعديل مستوى My Cart بينما لا يقع حذفها من المنتجات
الكود الذي قمت به
App.js
// Remove From Cart const removeFromCart = (id) => { const removed = cartItems.filter(item => item.id !== id) setCartItems(removed) }
Cart.jsx
CartItemjsx
شكرا لكم
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.