提示错误：动作必须是普通对象。使用自定义中间件执行异步操作

Question

我已经在StackOverflow中搜索了自己的问题，但自己无法自行解决，因此我想将其发布在这里。

我的问题是，当我尝试删除我的应用程序中的Mainmenu时，如果有一个属于该菜单的子菜单，它不允许我们删除它，那么后端也会发送400 msg的错误消息。但是当我尝试删除没有任何子菜单或子菜单的菜单时，它将完美地删除它现在的问题是我的通知Toast在发生错误时调用两次。它显示错误消息，也显示成功消息。

我添加了显示我的错误的小gif文件。

View post on imgur.com

以下是我的还原动作

//delete Menu
export const deleteMenu = (id) =>async (dispatch) => {
    console.log('action id : ' + id + '');
    await axios
        .delete(`/api/users/deleteMenu/${id}`)
        .then(
            (res) =>

                dispatch({
                    type: 'MENU_DELETED',
                    value: id
                }),
                dispatch(getMenu()),
                toast.success('Menu Deleted Successfully!')


        )
        .catch((err) => {
//below has a returnerror handler which i created is use to show errors when error is there.
            dispatch(returnErrors(err.response.data, err.response.status, 'MENU_DELETE_FAILED'));
            console.log(err);

        });
};

//获取菜单操作

export const getMenu = () => (dispatch) => {


    axios
        .get(`/api/users/getMenu`)
        .then((res) =>

            dispatch({
                type: 'GET_MENU',
                value: res.data
            })
        )
        .catch((err) => {

            console.log('Get Menu error! : ' + err);
        });
};

下面是我的后端

//delete Menu
router.delete('/deleteMenu/:id', (req, res) => {

    db.query('SELECT id FROM menu WHERE parentId =' + req.params.id + ' ', (error, hvchild) => {
        if (!error) {
            if (hvchild.length > 0) {
                return res.status(400).json("Please Delete Child Menu's Before Deleting Main Menu!");
            } else {
        console.log("im called")
                db.query('DELETE FROM menu WHERE id = ' + req.params.id + '', (err, row) => {
                    if (!err) {
                        res.json('Menu Deleted Successfully!');
                    } else {
                        console.log(err);
                    }
                });
            }
        }else{
      console.log(error);
    }
    });
});

更新：根据Narendra Chouhan的回答，我已经更新了我的代码。现在的问题是我的通知Toast在发生错误时调用两次。它显示错误消息，也显示成功消息。

ps：我是新来的反应＆redux：）

Answer 1

我已经解决了这个问题，请您全力以赴！

所做的是

//delete Menu
export const deleteMenu = (id) => async (dispatch) => {
    console.log('action id : ' + id + '');
    await axios
        .delete(`/api/users/deleteMenu/${id}`)
        .then(
            (res) =>
///below i added 2 braces covering dispatch & toast & then removed the comma's which i ///used earlier .
            {dispatch({
                type: 'MENU_DELETED',
                value:{ id }
            })
            dispatch(getMenu())
            toast.success('Menu Deleted Successfully!')
                }




        )
        .catch((err) => {
            dispatch(returnErrors(err.response.data, err.response.status, 'MENU_DELETE_FAILED'));
            console.log(err);

        });
};

Answer 2

//delete Menu
export const deleteMenu = (id) => async (dispatch) => {
  console.log('action id : ' + id + '');
  await axios
    .delete(`/api/users/deleteMenu/${id}`)
    .then(
      (res) =>

        dispatch({
          type: 'MENU_DELETED',
          value: { id }
        }),
      dispatch(getMenu())
        toast.success('Menu Deleted Successfully!'),


    )
    .catch((err) => {
      //below has a returnerror handler which i created is use to show errors when error is there.
      dispatch(returnErrors(err.response.data, err.response.status, 'MENU_DELETE_FAILED'));
      console.log(err);

    });
};

尝试一下，它将为您工作