Question

警告：可能存在未处理的承诺拒绝（id：0）

2022-03-19

6731

javascript android node.js react-native

我正在使用 react-native 构建电子商务应用程序，我刚刚遇到一个错误，我不知道它是什么意思

错误是“可能未处理的承诺拒绝（id：0）： TypeError：未定义不是对象（评估'err.response.data'）”

我在 2-3 个文件中使用了“err.response.data”，但我提到了一个文件的代码

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(() => {});
};

我不知道这个错误发生在哪里，但我真的需要帮助

这是“returnErrors”文件

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,
  };
};

编辑后；

import AsyncStorage from '@react-native-community/async-storage';
import axios from 'axios';
import {returnErrors} from './dist/errorActions';
import {ADD_TO_CART, CHECK_OUT} from './dist/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 ?? 'your default msg',
          err.response?.status ?? 'your default status',
          'PRODUCT_POST_FAIL',
        ),
      );
    });
};

//* Load app 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',
        ),
      );
    });
};

//* app 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(() => {});
};

和 returnErrors 文件注意： 当我编辑 returnError 代码时，我在问号上收到错误“意外令牌”符号

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

// RETURN ERRORS
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},
    };
  };

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

还有一件事，每当我尝试在应用程序中注册时，它只会抛出这个错误（我希望你明白我想说什么）

Answer 1

也许您可以在传递 returnErrors() 参数之前检查它们是否存在

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

或者您可以教您的 returnErrors 函数如何处理未定义的参数

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

Answer 2

您必须提供 returnErrors 函数的签名以便进行更好的分析，但我认为此函数需要一个对象作为其第一个参数，而 err.response.data 可能未定义。这会在代码的异步部分引发类型错误，导致 Unhandled Promise Rejection 。

要解决此问题，您可以在每次调用 returnErrors 时检查发送给它的数据类型，或者让函数 returnErrors 接收任何类型的数据并相应地对其进行格式化。我宁愿实施后者。