向客户返回他们提供的数据的响应就像来自数据库MERN项目的AutoResponse

问题描述

我正在尝试向我的客户提交表单后的回复。提交已成功存储在我的数据库中，下面尝试在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>
              );
           }

我的问题是我不断在数据库中获取第一个提交的数据。如何获取当前用户提交的数据并在提交表单时呈现给他或她？

解决方法

正如Nsikan所说，看到实际的表格将帮助我们为您提供帮助！但是您的代码中有一些线索。我看到两个问题。

首先，您的client.displayContactMessage方法无法按原样工作。循环的for(... of posts)将在第一次迭代时返回。如果要显示多个响应，则必须使用map，如React doc的"Lists and Keys" section中所述。

但是，由于您说的是只需要显示一个回复，因此这将导致我们遇到第二个问题：您的axios.get("/api")显然可以获取表单提交的整个列表！这里不仅存在巨大的敏感信息泄露风险，而且您不需要所有这些数据。您只需要刚刚提交的表单中的那个。

并且您碰巧已经在组件状态下保存了数据。

您可以替换：

for (const {
    companyName: cName,email: eMail,phone: pHone,selectName: sName,count: countNow,date: dateNow,} of posts) {
  return (
    // your JSX
  );
}

与此：

const {
  companyName: cName,} = this.state;
return (
  // your JSX
);

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