حذف عنصر باستخدام redux

محمود سعداوي2 · 19 فبراير 2023

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

أريد حذف منتج معين.

قمت بكتابة الكود التالي:

removeFromCart(state,action){
            state.cartItems = state.cartItems.filter(item => item.id !== action.payload)
        }

<i 
                        className="bi bi-trash fill cart-item-delete-icon" 
                        onClick={()=>dispatch(removeFromCart(item.id))}
                      ></i>

لكن تظهر لي رسالة الخطأ التالية:

react-dom.development.js:16227 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:16227:1)
    at useContext (react.development.js:1618:1)
    at useReduxContext (useReduxContext.js:21:1)
    at useStore (useStore.js:17:1)
    at useDispatch (useDispatch.js:14:1)
    at onClick (CartPage.jsx:43:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)

شكرا على المساعدة

Mustafa Suleiman · 19 فبراير 2023

تشير الرسالة التي تلقيتها إلى أنك تحاول استخدام React hook ، وتحديدًا الـ useDispatch hook ، خارج الـ component. يمكن استخدام React hooks داخل الـ function component أو بداخل custom hooks أخرى فقط والتي بدورها هي داخل function component.

يبدو من الكود الذي قدمته أنك تحاول إرسال حدث لإزالة عنصر من العربة عند النقر فوق رمز الحذف. ومع ذلك ، يجب عليك التأكد من أن العنصر الذي يحتوي على هذا الكود هو function component.

هنا مثال على كيفية تعديل الكود الخاص بك لاستخدام الـ useDispatch hook داخل function component:

import { useDispatch } from 'react-redux';
import { removeFromCart } from 'path/to/actions';

function CartItem({ item }) {
  const dispatch = useDispatch();

  const handleRemove = () => {
    dispatch(removeFromCart(item.id));
  }

  return (
    <div className="cart-item">
      <div className="cart-item-details">
        {/* item details */}
      </div>
      <i className="bi bi-trash fill cart-item-delete-icon" onClick={handleRemove}></i>
    </div>
  );
}

export default CartItem;

في هذا المثال ، CartItem هو function component. يستخدم الـ useDispatch hook للحصول على الدالة dispatch ، التي يتم استخدامها لإرسال الحدث removeFromCart عند النقر فوق رمز الحذف. تأكد من أن عنصرك يتبع هذه الهيكلية وأنك تستورد الـ useDispatch hook من الموقع الصحيح.

تم التعديل في 19 فبراير 2023 بواسطة Mustafa Suleiman

حذف عنصر باستخدام redux

السؤال

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

1 جواب على هذا السؤال

Recommended Posts

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية