首页 > 解决方案 > 在 Express 中回复两次

问题描述

我的反应代码

<form action="/ContactUs/FormData" method="POST">
...         
</form>

handleSubmit(){
    fetch('/ContactUs/FormData')
    .then((results)=>results.json())
    .then((result)=>{
        if(result.name==='ErrorOccured'){
            this.setState({
                display: 'An Error Occured. Please try again!'
            });
        }
        else{
            this.setState({
                display: 'We have recorded your response '+result.name+ '. Please note your ID: '+ result.id
            });
        }
    })
}

我的快递代码

app.post("/ContactUs/FormData",function(req,res){

}
formResponse.save((err,data)=>{ 
    if(err){
        res.write(JSON.stringify({"name":"ErrorOccured"}));
    }
    else{
        res.write(JSON.stringify(data));
    }
    res.redirect("/ContactUs");
});

我希望当数据提交到“/ContactUs/FormData”时,应该使用 Mongoose 保存它,然后应该呈现表单页面(一个 post 方法中的两个响应请求)。

我如何实现这一点,即页面也被渲染并且一些 json 数据也被发送到 React。

标签: javascriptnode.jsreactjsexpressmongoose

解决方案


Express 不应该呈现表单页面。ReactJS 应该。Express 必须只回复 React 呈现表单页面所需的任何数据。

你的场景应该是:

  1. React 发送表单数据
  2. Express 将其保存到数据库中
  3. 保存后,检索呈现表单页面所需的任何数据
  4. 在 express 中,将表单页面的数据和保存操作中的成功/错误消息组合到一个 JS 对象中。
  5. Express 应该通过res.write(无重定向)将此单个对象发送到 React
  6. React通过显示 Express 发送的数据读取答案、显示任何错误消息和/或呈现表单页面

请注意,Express 可以返回任何类型的数据,包括让 React 知道接下来要渲染哪个页面的信息。


推荐阅读