my reducer function as per seen the code below, is getting called multiple times causing my incremention to be worng and increment by margins of 2.
i am running this in strictmode so i know it renders one more time to be safe. but it shouldnt affect the state/
export const ItemContext = createContext();
export const CartItemContext = createContext();
function reducer(state,action){
if(action.type === "increment-quantity")
{
console.log(state[action.mealIndex][1]);
state[action.mealIndex][1] +=1 ;
}
else if(action.type === "decrement-quantity")
{
}
else if(action.type === "add-meal")
{
state = [...state,[action.meal,1]];
}
return state;
}
function App() {
const [orderedMeals,dispatch] = useReducer(reducer,[]);
const [openModal,setOpenModal] = useState(false);
const [Quantity,setQuantity] = useState(0);
const [isFetching,menu,setFetchedData,error]= useFetch(fetchMeals,[]);
const onAddToCart = (meal) => {
const mealFound = orderedMeals.find((mealPair) => {return mealPair[0] === meal;})
const mealIndex = orderedMeals.indexOf(mealFound);
if(mealFound === undefined)
{
dispatch({type:"add-meal",meal:meal})
}
else
{
dispatch({type:"increment-quantity",mealIndex:mealIndex});
}
setQuantity(Quantity+1);
};
i dont know hwo to fix this please help thank.