Getting Parsing error: Unexpected token, expected "," error while passing addToCart in dispatch with two parameters

Viewed 18

I am getting error Parsing error: Unexpected token, expected "," at line 55 while dispatching addToCart action with two parameters. I am using redux toolkit. At line 27 this dispatch method is working properly. Please see the picture below. I am passing two parameters as an object.(redux toolkit syntax for passing parameters in async function) Error at line 55

//CartScreen
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams, useLocation } from 'react-router-dom';
import {
Row,
Col,
ListGroup,
Image,
Form,
Button,
Card,
} from 'react-bootstrap';
import Message from '../components/Message';
import { addToCart } from '../features/addToCart/cartSlice';

const CartScreen = () => {
  const { id } = useParams(); 
  const location = useLocation(); 
  const qty = location.search ? Number(location.search.split('=')[1]) : 1; 
  const dispatch = useDispatch();
  const cart = useSelector((store) => store.cart);
  const { cartItems } = cart;
  console.log(cart);
  useEffect(() => {
    if (id) {
      dispatch(addToCart({ id, qty }));
    }
  }, [dispatch, id, qty]);

  return (
    <Row>
      <Col md={8}>
        <h1>Shopping Cart</h1>
        {cartItems.length === 0 ? (
          <Message>
            Your Cart is empty <Link to='/'>Go Back</Link>{' '}
          </Message>
        ) : (
          <ListGroup variant='flush'>
            {cartItems.map((item) => {
              <ListGroup.Item key={item.product}>
                <Row>
                  <Col md={2}>
                    <Image src={item.image} alt={item.name} fluid rounded />
                  </Col>
                  <Col md={3}>
                    <Link to={`/product/${item.product}`}>{item.name} </Link>
                  </Col>
                  <Col md={2}>${item.price}</Col>
                  <Col md={2}>
                    <Form.Control
                          as='select'
                          value={qty}
                          onChange={(e) => dispatch(addToCart({item.product,e.target.value}))}
                        >
                          {
                            
                            [...Array(item.countInStock).keys()].map((x) => (
                              <option key={x + 1} value={x + 1}>
                                {x + 1}
                              </option>
                            ))
                          }
                          console.log(...Array(product.countInStock).keys())
                        </Form.Control>
                  </Col>
                </Row>
              </ListGroup.Item>;
            })}
          </ListGroup>
        )}
      </Col>
      <Col md={2}></Col>
      <Col md={2}></Col>
    </Row>
  );
};

export default CartScreen;


//CartSlice
import { createSlice, createAsyncThunk, current } from '@reduxjs/toolkit';
import axios from 'axios';

export const addToCart = createAsyncThunk(
  'addToCart',
  async ({ id, qty }, thunkAPI) => {
    //getting id and qty from cartScreen

    try {
      const { data } = await axios(`/api/products/${id}`);
      localStorage.setItem(
        'cartItems',
        JSON.stringify(thunkAPI.getState().cart.cartItems)
      ); //data ko local storage save rakhny k lye... isko humny json.stringify kea hy kun k local storage mein sirf string store kr sakty... yahan hum ny local storage mein store kea hy lekin isko fetch store mein jakar krein gay

      const productData = {
        product: data._id,
        name: data.name,
        image: data.image,
        price: data.price,
        countInStock: data.countInStock,
        qty,
      };
      return productData;
    } catch (error) {
      console.log(error);
    }
  }
);

const initialState = {
  cartItems: [],
};

const cartSlice = createSlice({
  name: 'cartReducer',
  initialState,
  extraReducers: {
    [addToCart.pending]: (state) => {
      state.cartItems = [];
    },
    [addToCart.fulfilled]: (state, action) => {
      const item = action.payload;
      const existItem = state.cartItems.find(
        (cartItem) => cartItem.product === item.product
      );
      if (existItem) {
        return {
          ...state,
          cartItems: state.cartItems.map((cartItem) => {
            return cartItem.product === existItem.product ? item : cartItem;
          }),
        };
      } else {
        state.cartItems = [...state.cartItems, item];
      }
    },
    [addToCart.rejected]: (state) => {
      state.cartItems = 'Some error has occured';
    },
  },
});
export default cartSlice.reducer;
0 Answers
Related