Path `comment` is required. MERN stack

I don’t understand why I get this error. This is my controller:

export const createProductReview = async (req, res) => {
  const { rating, comment } = req.body;

  const product = await Product.findById(req.params.id);

  if (product) {
    const alreadyReviewed = product.reviews.find(
      r => r.user.toString() === req.user.userId.toString()
    );
    if (alreadyReviewed) {
      throw new NotFoundError('Product already reviewed');
    }
    const review = {
      user: req.user.userId,
      name: req.user.username,
      rating: Number(rating),
      comment,
    };

    product.reviews.push(review);

    product.numOfReviews = product.reviews.length;

    product.rating =
      product.reviews.reduce((acc, item) => item.rating + acc, 0) /
      product.reviews.length;

    await product.save();
    res.status(StatusCodes.OK).json({ message: 'Review added', review });
  } else {
    throw new NotFoundError('Product not found');
  }
};

This is mine productPage where i dispatch addProductReview and passing product id from params and review object:

const [rating, setRating] = useState(0);
  const [comment, setComment] = useState('');

  const submitHandler = e => {
    e.preventDefault();
    dispatch(
      addProductReview(id, {
        rating,
        comment,
      })
    );
  };

And this is my productSlice:

export const addProductReview = createAsyncThunk(
  'product/review',
  async (id, { review }, thunkAPI) => {
    try {
      const { data } = await axios.post(
        `/api/v1/products/${id}/reviews`,
        review
      );
      return data;
    } catch (error) {
      const message = error.response.data.msg;
      return thunkAPI.rejectWithValue(message);
    }
  }
);

I have no clue why i got error Path comment is required. i pass review object to route.

>Solution :

The issue is with the parameters used in your Thunk payloadCreator. From the documentation…

The payloadCreator function will be called with two arguments:

• arg: a single value, containing the first parameter that was passed to the thunk action creator when it was dispatched. This is useful for passing in values like item IDs that may be needed as part of the request. If you need to pass in multiple values, pass them together in an object when you dispatch the thunk, like dispatch(fetchUsers({status: 'active', sortBy: 'name'})).
• thunkAPI: an object containing all of the parameters that are normally passed to a Redux thunk function, as well as additional options

Your payloadCreator has three arguments which is incorrect.

Try this instead

export const addProductReview = createAsyncThunk(
  'product/review',
  async ({ id, ...review }, thunkAPI) => {
    try {
      const { data } = await axios.post(
        `/api/v1/products/${id}/reviews`,
        review
      );
      return data;
    } catch (error) {
      const message = error.response.data.msg;
      return thunkAPI.rejectWithValue(message);
    }
  }
);

and dispatch it like this

dispatch(addProductReview({ id, rating, comment }));