时间戳

首页 > 解决方案 > 如何解决“操作必须是普通对象。使用自定义中间件进行异步操作。”

reactjs - 如何解决“操作必须是普通对象。使用自定义中间件进行异步操作。”

问题描述

我正在完成 Coursera 中“使用 React 进行前端 Web 开发”课程的第 4 项作业。在这里，我想向服务器提交表单数据，然后向用户显示警报。并且代码工作正常，警报也显示，但随后发生错误。

从堆栈溢出的相关帖子中，我发现问题与返回必须具有类型属性的 redux 操作有关。但我不知道我是如何以这种方式返回的。因为我不需要做任何动作。我只需要显示一个警报。


export const postFeedback = (firstname, lastname, email, telnum, agree, contactType, message) => {
        const newFeedback = {
            firstname:firstname,
            lastname:lastname,
            email:email,
            telnum:telnum,
            agree:agree,
            contactType: contactType,
            message:message,
        }
        newFeedback.date = new Date().toISOString();
        return fetch(baseUrl + 'feedback', {
            method: "POST",
            body: JSON.stringify(newFeedback),
            headers: {
                "content-Type": "application/json"
            },
            credentials: "same-origin"
        })
        .then(res => {
            if (res.ok){
                return res
            }else{
                var error = new Error('Error '+ res.status + ': '+res.statusText);
                error.response = res;
                throw error;
            }},
            error => {
                throw error;
            })
            .then(response => response.json())
            .then(response => alert(response))
            .catch(error =>  { console.log('post feedback', error.message);
             alert('Your feedback could not be sent\nError: '+error.message);
             });
    }

一切正常。反馈保存在数据库中，并且还显示警报，然后显示错误“错误：操作必须是普通对象。使用自定义中间件进行异步操作。” 发生了。

标签： reactjsreact-redux

解决方案

最后通过添加一个不做任何事情的动作来解决这个问题。这是像魅力一样工作的代码。我发布它以防有人可能会得到帮助

export const addFeedback = () => ({
    type: ActionTypes.ADD_FEEDBCK,
})
export const postFeedback = (firstname, lastname, email, telnum, agree, contactType, message) =>
 dispatch => {
        const newFeedback = {
            firstname:firstname,
            lastname:lastname,
            email:email,
            telnum:telnum,
            agree:agree,
            contactType: contactType,
            message:message,
        }
        newFeedback.date = new Date().toISOString();
        return fetch(baseUrl + 'feedback', {
            method: "POST",
            body: JSON.stringify(newFeedback),
            headers: {
                "content-Type": "application/json"
            },
            credentials: "same-origin"
        })
        .then(res => {
            if (res.ok){
                return res
            }else{
                var error = new Error('Error '+ res.status + ': '+res.statusText);
                error.response = res;
                throw error;
            }},
            error => {
                throw error;
            })
            .then(response =>  response.json())
            .then(res => {
                console.log(res);
                alert(JSON.stringify(res));
                return dispatch(addFeedback());
            })
            .catch(error =>  { console.log('post feedback', error.message);
             alert('Your feedback could not be sent\nError: '+error.message);
             });
    }

推荐阅读