Блог

Я пытаюсь представить ответ своим клиентам при отправке формы. Отправка успешно сохранена в моей базе данных, и ниже я пытаюсь получить ответ в свойстве массива 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>
              );
           }
  

Моя проблема в том, что я продолжаю получать первые отправленные данные в своей базе данных. Как мне получить отправленные данные текущего пользователя и представить ему или ей при отправке формы?

Как сказал Нсикан, просмотр фактической формы поможет нам помочь вам! Но в вашем коде есть подсказки. Я вижу две проблемы.

Во-первых, ваш client.displayContactMessage метод не может работать как есть. Цикл for(... of posts) of вернется на самой первой итерации. Если вы хотите отобразить несколько ответов, вам придется использовать map, как описано в разделе React doc «Списки и ключи».

Но поскольку вы сказали, что вам нужно отобразить только один ответ, это приводит нас ко 2-й проблеме: ваш 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
);
  

Я предположил, что ваш компонент, отображающий ответ, совпадает с тем, из которого вы отобразили и отправили форму.