在Express中回应两次

Question

我的React代码

<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。

Answer 1

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

您的情况应为：

1. React发送表单数据
2. Express将其保存到数据库中
3. 保存后，检索呈现表单页面
所需的所有数据
4. 明确地说，将表单页面的数据和来自保存操作的成功/错误消息组合到一个JS对象中。
5. Express应该通过res.write（不可重定向）将此单个对象发送到React。
6. React通过显示Express发送的数据读取答案，显示任何错误消息和/或呈现表单页面

请注意，Express可以返回任何类型的数据，其中包括React知道下一步要呈现的页面的信息。