Return 客户回复了他们提供的数据。就像来自数据库 MERN 项目的自动回复

Question

我正在尝试在提交表格时向我的客户做出回应。提交已成功存储在我的数据库中，下面我试图在帖子数组属性中获取响应。然后将其解构为对象数组并向我的客户提供响应。"

问题是我一直在获取第一个提交的客户的数据表格。”我希望每个客户都收到一条包含他或她提供的信息的接待消息。

//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!!`);
      });
};

在这里，我试图析构数据并return在我的表单下方对当前客户端的响应。

//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>
              );
           }

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

Answer 1

正如 Nsikan 所说，看到实际形式将有助于我们帮助您！但是您的代码中有线索。我看到两个问题。

首先，您的 client.displayContactMessage 方法无法正常工作。 for(... of posts) 循环将在第一次迭代时 return。如果要显示多个回复，则必须使用 map, as described in React doc's "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,
  email: eMail,
  phone: pHone,
  selectName: sName,
  count: countNow,
  date: dateNow,
} = this.state;
return (
  // your JSX
);

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

Return 客户回复了他们提供的数据。就像来自数据库 MERN 项目的自动回复

Return clients a response with their data they provided. Like an AutoResponse coming from a database MERN project

javascript

response

destructuring

reactjs

mern