I am building ecommerce app using react-native I just encountered an error which i don't know what it mean

Error is "Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not an object (evaluating 'err.response.data')"

I have used "err.response.data" in 2-3 file but i have mentioned code of one file

import AsyncStorage from '@react-native-community/async-storage';
import axios from 'axios';
import {returnErrors} from './errorActions';
import {ADD_TO_CART, CHECK_OUT} from './types';
import {
  AllDispatchProp,
  API_URI,
  CLEAR_ERRORS,
  DELETE_PRODUCT,
  LOADED_PRODUCTS,
  LOADING_PRODUCTS,
  SENT_PRODUCT,
} from './types';

export const addProduct = ({
  title,
  price,
  imageUrl,
  desc,
}: {
  title: string;
  price: string;
  imageUrl: string;
  desc: string;
}) => async (dispatch: AllDispatchProp, getState: any) => {
  const auth = getState().auth;
  const data = JSON.stringify({title, price, imageUrl, desc, user: auth.user});
  const token = AsyncStorage.getItem('@user_token');

  //* Store a product
  axios({
    method: 'POST',
    url: `${API_URI}/api/product`,
    data,
    headers: {
      'content-type': 'application/json',
      'x-app-token': token,
    },
  })
    .then((res) => {
      dispatch({type: CLEAR_ERRORS, payload: null});
      dispatch({type: SENT_PRODUCT, payload: res.data._doc});
    })
    .catch((err) => {
      dispatch(
        returnErrors(
          err.response.data,
          err.response.status,
          'PRODUCT_POST_FAIL',
        ),
      );
    });
};

//* Load Amazon Products *//
export const loadProducts = () => async (dispatch: AllDispatchProp) => {
  dispatch({type: LOADING_PRODUCTS, payload: null});
  const token = await AsyncStorage.getItem('@user_token');

  //* Load products from url *//
  axios({
    method: 'GET',
    url: `${API_URI}/api/product`,
    headers: {
      'content-type': 'application/json',
      'x-app-token': token,
    },
  })
    .then((res) => {
      dispatch({type: LOADED_PRODUCTS, payload: res.data});
    })
    .catch((err) => {
      dispatch(
        returnErrors(
          err.response.data,
          err.response.status,
          'LOAD_PRODUCT_FAIL',
        ),
      );
    });
};

export const deleteProduct = (_id: string) => async (
  dispatch: AllDispatchProp,
) => {
  const data = JSON.stringify({_id});
  const token = await AsyncStorage.getItem('@user_token');

  axios({
    method: 'DELETE',
    url: `${API_URI}/api/product`,
    data,
    headers: {
      'content-type': 'application/json',
      'x-app-token': token,
    },
  })
    .then((res) => {
      dispatch({type: DELETE_PRODUCT, payload: res.data._id});
    })
    .catch((err) => {
      dispatch(
        returnErrors(
          err.response.data,
          err.response.status,
          'DELETE_PRODUCT_FAIL',
        ),
      );
    });
};

//* Amazon add to cart *//
export const addToCart = (_id: string) => async (
  dispatch: AllDispatchProp,
  getState: any,
) => {
  const {products, cartProducts} = getState().product;
  const cartProduct = cartProducts.filter((p: any) => p._id === _id);
  const isInCart = cartProduct.length > 0;
  const data = JSON.stringify({_id});
  const token = await AsyncStorage.getItem('@user_token');

  if (!isInCart) {
    axios({
      method: 'PUT',
      url: `${API_URI}/api/product`,
      headers: {
        'content-type': 'application/json',
        'x-app-token': token,
      },
      data,
    })
      .then((res) => {
        dispatch({type: ADD_TO_CART, payload: res.data});
      })
      .catch((err) => {
        dispatch(
          returnErrors(
            err.response.data,
            err.response.status,
            'ADD_TO_CART_FAIL',
          ),
        );
      });
  }
};

export const productCheckOut = () => async (dispatch: AllDispatchProp) => {
  const token = await AsyncStorage.getItem('@user_token');

  axios({
    method: 'GET',
    url: `${API_URI}/api/product`,
    headers: {
      'content-type': 'application/json',
      'x-app-token': token,
    },
  })
    .then((res) => {
      dispatch({type: CHECK_OUT, payload: res.data});
    })
    .catch((err) => {
      dispatch(
        returnErrors(err.response.data, err.response.status, 'CHECKOUT_FAIL'),
      );
    });
};

export const clearCart = () => async (dispatch: AllDispatchProp) => {
  const token = await AsyncStorage.getItem('@user_token');
  axios({
    method: 'PUT',
    url: `${API_URI}/api/product/clear`,
    headers: {
      'x-app-token': token,
    },
  })
    .then(() => {
      return loadProducts();
    })
    .catch(() => {});
};

I dont from where this error occurred but I really need help in this on

This is the "returnErrors" file

import {GET_ERRORS, CLEAR_ERRORS} from './types';

// RETURN ERRORS
export const returnErrors = (
  msg: string,
  status: string | number,
  id: string | null,
) => {
  return {
    type: GET_ERRORS,
    payload: {msg, status, id},
  };
};

// CLEAR ERRORS
export const clearErrors = () => {
  return {
    type: CLEAR_ERRORS,
  };
};

CodePudding user response：

You would have to provide the signature of the returnErrors function for a better analysis but I think this function expects an object as its first argument while err.response.data could be undefined. That would throw a type error in an asynchronous part of the code, resulting in the Unhandled Promise Rejection.

To resolve this, you could check the kind of data you send to returnErrors every time you call it, or make the function returnErrors receive any kind of data and format it accordingly. I would rather implement the latter.

CodePudding user response：

Maybe you can check if the params for returnErrors() exist before passing them

.catch((err) => {
      
         dispatch(
           returnErrors(
           err.response?.data ?? "your default msg",
           err.response?.status ?? "your default status",
           'PRODUCT_POST_FAIL',
           ),
          );
      
    });

or you can teach your returnErrors function how to deal with undefined params

export const returnErrors = (
  msg: string | undefined,
  status: string | number | undefined,
  id: string | null,
) => {
  return {
    type: GET_ERRORS,
    payload: {msg??"your default msg", status??"your default status", id},
  };
};