需要呈现页，以便可以看到页中已有的数据。
在reactJS中，有状态，
状态是一个内置的React对象，用于包含有关组件的数据或信息。组件的状态可以随时间而更改;每当它改变时，组件重新呈现。source
因此，您需要使用一个状态来使组件再次呈现并查看数据。
只需创建一个新状态，如下所示：

const [isSubmitted, setIsSubmitted] = React.useState(false);

然后在需要时更改状态，在示例中，您必须这样使用它：

const handleEmail = (event) => {
setEmail(event.target.value);
setIsSubmitted(false);
console.log(isSubmitted);
};

const handleSubmit = (event) => {
event.preventDefault();
setIsSubmitted(true);
console.log(isSubmitted);
};

您应该使用状态来控制用户是否提交了电子邮件的布尔值。

• • 为什么不能使用正态变量**

每当你更新一个状态变量，组件就会重新呈现，而每次它重新呈现时，你就把isSubmitted标志设置为undefined，另外，即使它没有undefined，它也不会更新你的组件来显示邮件，因为非状态变量不会触发重新呈现，所以更新isSubmitted为true不会触发你的三元语句，而重新呈现它只会使其返回到undefined状态，这使得两种情况下都不会呈现div标记内容。

• • 解决方案**

如果您希望有条件地呈现某些内容，则应该使用useState，这是react的全部要点，以便相应地"React"并更新DOM。这是我看到的初学者在第一次接触React时掌握的最大问题之一。
下面是我的解决方法，在您提交结束标记后，它不会将其更新为任何值（我假设您希望实现此方法）：

const [email,setEmail] = useState("");
 const [isSubmitted, setIsSubmitted] = useState(false);

  /**
   * handles the Email input, does not update if the form has been submitted or if the string is empty.
   * @param {*} e 
   */
  const handleEmail = (e) => {
    if(e.target.value.length > 0 && isSubmitted === false) {
      setEmail(e.target.value);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitted(true);
  };
  
  return (
    <>
      <h1>Form example</h1>
      <form onSubmit={(e) => handleSubmit(e)}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" type="text" onChange={handleEmail} />
        </div>
        <button type="submit">Submit</button>
      </form>
      {isSubmitted ? <p>Thank you for submitting your email: {email}</p> : null}
    </>