Reactjs 单击提交表单后如何更新页面？

提交表单后如何更新状态？我只希望表格再清楚一点。我已经可以在firestore中成功保存，但页面未更新。我必须重新加载才能再次清除表单

 const msg = (props) => {
      const [displayName, setdisplayName] = useState("");
      const [email, setEmail] = useState("");
      const [messag, setMessaeg] = useState("");
    
      const handleSubmit = (event) => {
        event.preventDefault();
        try {
          firestore.collection("contac").add({
            displayName: displayName,
            message: message,
          });
          alert("sent successfully");
        } catch (err) {
          console.log(err);
        }
      };
    
      return (
        <div>
          <form onSubmit={handleSubmit}>
            <TextField
              type="text"
              onChange={(e) => setdisplayName(e.target.value)}
            />
           
            <TextField
              type="text"
              onChange={(e) => setMsg(e.target.value)}
            />
            <Button
              type="submit"
            >
              Submit
            </Button>
          </form>
        
    

const msg=（道具）=>{
const[displayName，setdisplayName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[messag，setmessage]=useState（“”）；
const handleSubmit=（事件）=>{
event.preventDefault（）；
试一试{
firestore.collection（“contac”）。添加({
displayName:displayName，
讯息:讯息,，
});
警报（“发送成功”）；
}捕捉（错误）{
控制台日志（err）；
}
};
返回(
setdisplayName（e.target.value）}
/>
setMsg（e.target.value）}
/>
提交

我通常会用如下方式明确清除字段：

---

但是，如果希望重新加载整个页面，可以使用：

window.location.reload（）

。请参见添加一些代码，并使用：//{ event.preventDefault（）； 试一试{ firestore.collection（“contac”）。添加({ displayName:displayName， 讯息:讯息,， }); 警报（“发送成功”）； setdisplayName（“”）//

import React, { useState } from "react";
import { render } from "react-dom";


function App()  {
  let [displayName, setdisplayName] = useState('');
  let [email, setEmail] = useState("");
  let [messag, setMessaeg] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    try {
      firestore.collection("contac").add({
         displayName: displayName,
         message: message,
      });
      alert("sent successfully");
      setdisplayName(''); //<-- Add this
      setEmail(''); //<-- Add this
      setMessaeg(''); //<-- Add this
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={displayName} //<-- Add this
          onChange={(e) => setdisplayName(e.target.value)}
        />
       
        <input
          type="text"
          value={messag} //<-- Add this
          onChange={(e) => setMessaeg(e.target.value)}
        />
        <button
          type="submit"
        >
          Submit
        </button>
      </form>
      </div>
    )
  }

render(<App  />, document.getElementById("root"));