Javascript 在下一个js中提交后如何清除表单？

这里我有一个联系人表单，我希望表单的所有值在提交表单后都应为空。
我已经编写了以下代码。但在提交表单的值保持不变后，这不起作用。
这里的问题是什么？如何解决

export default function contact() {

  const[name,setName]=useState("")
  const[phone,setPhone]=useState("")
  const[email,setEmail]=useState("")
  const[query,setQuery]=useState("")
  const [submitted, setSubmitted] = useState(false)

const  handleSubmit=(e)=>{
    e.preventDefault()
    console.log(e);
    let data = {
      name,
      email,
      phone,
      query
    }
    console.log(data);
    axios.post('http://127.0.0.1:8000/api/create/',data).then((res)=>{
      console.log(res);
      setSubmitted(true)
      setName('')
      setPhone('')
      setEmail('')
      setQuery('')
    })
  }
    return (
    <>
      <div>
        <h1>Contact Page</h1>
      </div>
        
        <div >    
           <form action="contact" method="post">
              <input name="name"  onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
              <input name="phone" onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
              <input name="email" onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
              <textarea name="text" onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
              <button onClick={(e)=>{handleSubmit(e)}} value="Send" >Submit </button>
          </form> 
               
                                
      </div>
    </>
    )
  }

导出默认函数联系人（）{
const[name，setName]=useState（“”）
const[phone，setPhone]=useState（“”）
const[email，setEmail]=useState（“”）
const[query，setQuery]=useState（“”）
const[submited，setSubmitted]=useState（false）
常量handleSubmit=（e）=>{
e、 预防默认值（）
控制台日志（e）；
让数据={
名称
电子邮件，
电话，
查询
}
控制台日志（数据）；
轴心柱http://127.0.0.1:8000/api/create/，则（（res）=>{
控制台日志（res）；
setSubmitted（真）
集合名（“”）
设置电话（“”）
设置电子邮件（“”）
setQuery（“”）
})
}
返回(
联系页面
{setName（e.target.value）}}占位符=“Name”/>

{setPhone（e.target.value）}占位符=“Phone”/>

{setEmail（e.target.value）}type=“email”placeholder=“e-mail”/>

{setQuery（e.target.value）}}占位符=“我们能为您提供什么帮助？”>

{handleSubmit（e）}value=“发送”>提交
)
}

首先，确保您的api调用成功结束，根据您的代码，只有在请求成功通过时才清理表单：）

当前您的输入中缺少

值

道具，因此您的输入是不受控制的组件，这就是为什么在表单提交后无法清除它们的原因

尝试添加

值
道具，如下所示：-

<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />


{setName（e.target.value）}占位符=“Name”/>

{setPhone（e.target.value）}占位符=“Phone”/>

{setEmail（e.target.value）}type=“email”placeholder=“e-mail”/>

{setQuery（e.target.value）}}占位符=“我们能为您提供什么帮助？”>

添加
值
支持您的输入，提交后您的表格将被清除：

<form>
    <input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
    <input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
    <input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
    <textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
</form>


{setName（e.target.value）}}占位符=“Name”/>

{setPhone（e.target.value）}占位符=“Phone”/>

{setEmail（e.target.value）}type=“email”placeholder=“e-mail”/>

{setQuery（e.target.value）}}占位符=“我们能为您提供什么帮助？”>