Javascript 向客户返回一个带有他们提供的数据的响应。就像来自数据库MERN项目的自动响应

我试图在提交表格时向我的客户提供回复。提交已成功存储在我的数据库中，下面我将尝试在posts数组属性中获取响应。然后将其分解为一个对象数组，并向我的客户提供响应。”

问题是我一直在获取第一个提交数据的客户的数据 “我希望每位客户都能收到一条接待信息，以及他或她提供的信息

//The state of the component
this.state = {
             companyName: "",
             email: "",
             phone: "",
             selectName: "",
             message: "",
             count: 1,
             date: "",
             posts: [],
};

在成功地将数据提交到我的数据库后，我想向我当前的客户机呈现单个结果。在我的帖子数组中收到

//   Here am getting a response from my database
getNewCustomer = () => {   
   axios
     .get("/api")
      .then((response) => {
        let data = response.data;
         this.setState({ posts: data });
         console.log(`Data has been received!!`);
      })
      .catch(() => {
         alert(`Error retrieving data receive!!`);
      });
};

在这里，我试图对数据进行析构函数，并将表单下的响应返回给当前客户端

//Handle submit
 const payload = {
     companyName: this.state.companyName,
     email: this.state.email,
     phone: this.state.phone,
     selectName: this.state.selectName,
     message: this.state.message,
     count: this.state.count,
     date: this.state.date,
  };

  axios({
     url: "/api/save",
     method: "POST",
     data: payload,
  })
     .then(() => {
        console.log(`Data has been sent to the sever `);
        this.resetUserInputs();
        this.getNewCustomer();
     })
     .catch((error) => {
        console.log(`Error occured ${error.message}`);
     });    }



     displayContactMessage = (posts) => {  //Code to present to client a response
           if (!posts.length) {
              return null;
           }
     
           for (const {
              companyName: cName,
              email: eMail,
              phone: pHone,
              selectName: sName,
              count: countNow,
              date: dateNow,
           } of posts) {
              return (
                 <section className="background-tertiary">
                    <div style={{ padding: "1rem" }}>       
                       <strong>
                          <em>
                             Automatic Response From our Office {countNow} date:
                             {dateNow}
                          </em>
                       </strong>
                       <p>
                          Thanks for contacting dear <mark>{cName}</mark>. We have
                          received your email: <mark>{eMail}</mark> and phone
                          number : <mark>{pHone}</mark>. Based on your contact
                          marked as a <mark>{sName}</mark> message you are ranked as
                          a prioritized client on our contact list.
                       </p>
                       <dl>
                          <dt>Administrator</dt>
                          <dd>####LLKJLA###</dd>
                          <dd>{this.state.date}</dd>
                       </dl>
                    </div>
                 </section>
              );
           }

//处理提交
常数有效载荷={
companyName:this.state.companyName，
电子邮件：this.state.email，
电话：这个州的电话，
selectName:this.state.selectName，
消息：this.state.message，
count:this.state.count，
日期：this.state.date，
};
axios({
url:“/api/save”，
方法：“张贴”，
数据：有效载荷，
})
.然后（（）=>{
log（`数据已发送到服务器'）；
这是resetUserInputs（）；
这个.getNewCustomer（）；
})
.catch（（错误）=>{
log（`Error occured${Error.message}`）；
});    }
displayContactMessage=（posts）=>{//向客户端显示响应的代码
如果（！posts.length）{
返回null；
}
为（常数）{
公司名称：cName，
电邮:电邮,，
电话:电话,，
选择名称：sName，
伯爵：伯爵现在，
日期：dateNow，
}（员额数目）{
返回(

我们办公室的自动响应{countNow}日期：
{dateNow}


感谢联系亲爱的{cName}。我们有
收到您的电子邮件：{email}和电话
电话号码：{pHone}。根据您的联系方式
标记为{sName}消息，您的排名为
我们联系人名单上的优先客户。

管理员
####LLKJLA###
{this.state.date}
);
}

---

我的问题是我一直在数据库中获取第一个提交的数据。我如何获取当前用户提交的数据并在提交表单时向他或她展示？

正如Nsikan所说，查看实际表单将帮助我们帮助您！但您的代码中有一些线索。我发现两个问题

首先，您的

客户端.displayContactMessage

方法无法按原样工作。循环的

for（…of posts）

将在第一次迭代时返回。如果要显示多个响应，则必须使用，如React文档中所述

但是，既然您说您只需要显示一个响应，那么这就引出了第二个问题：您的

axios.get（“/api”）

显然得到了所有提交表单的列表！这里不仅存在巨大的敏感信息泄露风险，而且您不需要所有这些数据。您只需要刚刚提交表单中的数据

而您恰好已经拥有处于组件状态的数据

您可以替换：

用于（常量）{
公司名称：cName，
电邮:电邮,，
电话:电话,，
选择名称：sName，
伯爵：伯爵现在，
日期：dateNow，
}（员额数目）{
返回(
//你的JSX
);
}

为此：

const {
  companyName: cName,
  email: eMail,
  phone: pHone,
  selectName: sName,
  count: countNow,
  date: dateNow,
} = this.state;
return (
  // your JSX
);

---

我假设您显示响应的组件与您显示和发送表单的组件相同。

您在此处发布的代码不完整。我希望看到表单以及您如何发布数据。甚至api service post操作。当客户提交表单时，我会向他们发送一条带有已提交信息的感谢消息。但是我总是在我的数据库中获得第一个提交的数据。这是一个MERN stack项目，是我第一次发布问题。发布前没有查看标题。您清楚地了解我的问题。我试图破坏结构以避免返回响应中的所有数据。请按照您在列表中发送的导入链接和react中的键进行操作，我仍然有我试过了，但我得到了一切。我能得到关于如何解决你提到的第二个问题的建议吗？有没有可以用来解决第二个问题的文档？@BenitoCan难道你不能避免使用

axios.get（“/api”）

call？我认为您不需要它。它是为了给用户提供即时反馈吗？如果是这样，那么您的状态中已经有了用户的所有信息。除非您想在其他组件中显示反馈。在这种情况下，它会有点复杂。