即时通讯错误:操作必须是普通对象。使用自定义中间件执行异步操作

时间:2019-10-04 12:09:06

标签: reactjs react-redux redux-thunk

我已经在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:我是新来的人,可以进行响应和还原:)

2 个答案:

答案 0 :(得分:0)

//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);

    });
};

尝试一下,它将为您服务

答案 1 :(得分:0)

我已经解决了我自己的问题,谢谢您的所有帮助!

所做的是

//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);

        });
};