اذهب إلى المحتوى
  • 0

حذف عنصر مع إتمام التعديل عند الحذف في ريآكت

محمود_سعداوي

السؤال

السلام عليكم.

أود تقديم إعتذاري عن أسئلتي الكثيرة التي أنا بصدد القيام بها.

لو سمحتم،

عند إضافتي لعنصر محدد تظهر لي popup تحتوي كل المنتجات التي قمت بإضافتها

1.JPG.423c59094e466ee6a2e84d4cd3847aa2.JPG

المشكل هو عند النقر على أيقونة الحذف يقع تعديل مستوى My Cart بينما لا يقع حذفها من المنتجات

2.JPG.e27de8d6d6484960c91398188aeeeb88.JPG

الكود الذي قمت به 

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>
  )
}

شكرا لكم

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 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]);

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

 أنت تستخدم مصفوفة cartItems لتخزين المنتجات في عربة التسوق، ولكن لا تمررها كمدخل لـ CartItem في Cart.jsx. بدلاً من ذلك، تم استخدام qtyArray، والذي يحتوي على قائمة من العناصر التي تم تعديلها بواسطة handlePlus و handleMinus. هذا هو السبب في أن الحذف لا يحدث في المصفوفة cartItems عند النقر على أيقونة الحذف.

لحل هذه المشكلة، يمكنك تمرير cartItems كمدخل لـ CartItem في Cart.jsx بدلاً من qtyArray. وبمجرد النقر على زر الحذف، يجب عليك استدعاء دالة removeFromCart وإرسال cartProduct.id كمدخل لها. ثم يجب عليك تحديث المصفوفة cartItems باستخدام setCartItems وإزالة العنصر الذي تم حذفه.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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)

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...