javascript - 为什么 react 中表单数据没有保存到本地存储？

Question

我编写了这个简单的代码来将数据保存到本地存储，但有时有效，有时无效(代码没有更改)。而且它主要保存的是空数据。这里发生了什么？当关闭、重新打开镶边窗口并输入新数据时，数据也会被删除。 这是return方法中的内容。

<div className="wrapper">
              <div className="content">
                <h1>Get in touch!</h1>
                <p>Connect with us by sending your views.</p>
              </div>
              <div className="form">
                <div className="top-form">
                  <div className="inner-form">
                    <div className="label">Name</div>
                    <input
                      type="text"
                      placeholder="Enter your name"
                      id="contname"
                    />
                  </div>
                  <div className="inner-form">
                    <div className="label">Email</div>
                    <input
                      type="text"
                      placeholder="Enter your email"
                      id="contemail"
                    />
                  </div>
                  <div className="inner-form">
                    <div className="label">Phone</div>
                    <input
                      type="text"
                      placeholder="Enter your phone no."
                      id="contph"
                      required
                    />
                  </div>
                </div>
                <div className="middle-form">
                  <div className="inner-form">
                    <div className="label">Subject</div>
                    <input
                      type="text"
                      placeholder="Enter the subject"
                      id="contsub"
                    />
                  </div>
                </div>
                <div className="bottom-form">
                  <div className="inner-form">
                    <div className="label">Message</div>
                    <textarea
                      placeholder="Enter your message"
                      id="contmessage"
                    ></textarea>
                  </div>
                </div>
                <div className="btn" id="sendmessage" onClick={ev => { this.addData(ev) }}>
                  Continue
                </div>
              </div>

这是保存数据的部分:

var contactData = [];
export default class Contact extends Component {
  componentDidMount() {
    window.scrollTo(0, 0)
  }

  addData = (ev) => {
    ev.preventDefault();
    let cdata = {
      contactname: document.getElementById("contname").value,
      contactphno: document.getElementById("contph").value,
      contactemail: document.getElementById("contemail").value,
      contactsubject: document.getElementById("contsub").value,
      contactmessage: document.getElementById("contmessage").value
    };
    contactData.push(cdata);
    localStorage.setItem("Contactinfo", JSON.stringify(contactData));
    alert("Data Submitted succesfully!");
  };

Answer 1

就像其他人所说的那样，利用react setState。对于存储在 localStorage 中，此视频可能会帮助您 https://www.youtube.com/watch?v=ZZS1irWSfxc