在 React 中捕获后端返回的错误

Question

大家好，我正在使用带有 typescript 的 react redux。因此，当后端 return 编辑错误时，我不希望它出现，因为它是来自后端的错误消息 return。在我的Apireturn这个错误时失败了。

这是我的 api 调用，函数 ,

   /**
 * @function createSalesContact
 * @export
 * @param {Array<ISalesContact>} salesContact
 * @returns {Promise<ISalesContactListItem[]>}
 */
export function createSalesContact(salesContact: Array<ISalesContact>): Promise<ISalesContactListItem[]> {
    return contactBookApiCalls.createSalesContacts(salesContact);
}

这是我的动作，

/**
 * @function crateSalesContact
 * action of create new sales contact
 * @param {Array<ISalesContact>} salesContact
 * @returns
 */
export const crateSalesContact = (salesContact: Array<ISalesContact>) => {
    return (dispatch: Dispatch, states: () => ISalesContactStoreState) => {
        dispatch(requestAddNewContact());

        createSalesContact(salesContact)
            .then(onSuccess)
            .catch(onError);

        function onSuccess(response: ISalesContactListItem[]) {
            dispatch(addToast("success", { text: "Sales Contact Created successfully" }))
            dispatch(addNewContactSuccess());
            dispatch(togglePage({ page: 'salesContact', action: 'View', 
            editId: response[0].Data.SalesContactId }));

        }

        function onError(error: any) {
            dispatch(addNewContactError(error));
        }
    };
};

所以我不想捕获 "The firstName is required" 错误。那么有什么可能的方法来做到这一点

Answer 1

我为此找到了一些解决方法。这是我的解决方案。

我像这样更改我的 Action 错误方法。

function onError(response: Response) {
        if (response.status === 500) {
            return response.json() 
                .then((json) => {

                    dispatch(addToast("error", { text: json.Message }));
                    dispatch(recieveSalesContactUpdateError(json.Message));

                    console.log(json.Message)
                });
        } else {
            return response.json();
        }
    }

在 React 中捕获后端返回的错误

Catch the backend returned error in React

typescript

reactjs

redux

redux-thunk