محمود_سعداوي نشر 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> ) } شكرا لكم اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 22 مارس 2023 أرسل تقرير مشاركة نشر 22 مارس 2023 هل يمكنك مشاركة ملفات المشروع بالكامل ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 22 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 22 مارس 2023 بتاريخ 15 دقائق مضت قال عمر قره محمد: هل يمكنك مشاركة ملفات المشروع بالكامل ؟ تفضل ملفات الsrc src.zip اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أود تقديم إعتذاري عن أسئلتي الكثيرة التي أنا بصدد القيام بها.
لو سمحتم،
عند إضافتي لعنصر محدد تظهر لي 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
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.