提交后反应钩子表单没有被清除

Question

我正在为我的项目使用反应钩子形式。我已经发送了post请求。现在，当我想清除输入时，它已成功插入数据库，即使我使用了 reset() 函数，它也没有被清除。我正在使用反应钩子形式 v7。如果有人知道请建议我。提前致谢！

这是我的代码：

import React from 'react'
import { useState } from 'react';
import {useForm} from 'react-hook-form';
import axios from 'axios';
import { useEffect } from 'react';
export const Enrollment = () => {
  const {register,handleSubmit,formState: { errors },reset}=useForm();
  
    const onSubmit = async(data) => {
     

      
          const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        };
    
        const response = await fetch("http://localhost:3001/enrollmentpercent", requestOptions);
        const jsonData = await response.json();
        console.log(jsonData)
        // console.log(response)
        reset();
        
        
        
    };
  
    return (
        <div className="container ">
        <form onSubmit={handleSubmit(onSubmit)}>
        <div class="mb-3 mt-5" >
        <h2>Enrollment Percentage                           
                

</h2>
          <label for="exampleFormControlInput1" class="form-label">Program Name

</label>
          <input type="text" class="form-control w-25" name="programname"  id="exampleFormControlInput1"
                {...register("programname", { required: true, pattern:{value:/^[a-zA-Z]+$/ ,message:'Only characters allowed'}})}  
               />
               {errors.programname && errors.programname.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.programname && errors.programname.type === "pattern" && (
        <div style={{color:'red'}}> Only characters allowed</div>
      )}
               
        </div>
       
        <div class="mb-3 w-25 ">
          <label for="exampleFormControlTextarea1" class="form-label">Program Code
</label>
          <input type="text" class="form-control" id="exampleFormControlTextarea1"  name="programcode" {...register("programcode", { required: true ,pattern:{value:/^[0-9\b]+$/ ,message:'Only number allowed'}})}  />
          {errors.programcode && errors.programcode.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.Programcode && errors.Programcode.type === "pattern" && (
        <div style={{color:'red'}}> Only numbers allowed</div>
      )}
        </div>
        <div class="mb-3 w-25">
          <label for="exampleFormControlTextarea1" class="form-label">Number of seats sanctioned


</label>
          <input type="text" class="form-control" id="exampleFormControlTextarea1"  name="seats" {...register("seats", { required: true,pattern:{value:/^[0-9\b]+$/ ,message:'Only Number allowed' }})}/>
          {errors.seats && errors.seats.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.seats && errors.seats.type === "pattern" && (
        <div style={{color:'red'}}> Only numbers allowed</div>
      )}
        </div>
        <div class="mb-3 w-25">
          <label for="exampleFormControlTextarea1" class="form-label">Number of Students admitted



</label>
          <input type="text" class="form-control" id="exampleFormControlTextarea1"  name="students" {...register("students", { required: true ,pattern:{value:/^[0-9\b]+$/ ,message:'Only number allowed'}})}  />
          {errors.students && errors.students.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.students && errors.students.type === "pattern" && (
        <div style={{color:'red'}}> Only numbers allowed</div>
      )}
        </div>
        
       
        
        <button type="submit" class="btn btn-primary me-md-2">Submit</button>
        <button type="button" class="btn btn-primary me-md-2" >Download Excel</button>
        <button class="btn btn-primary me-md-2" >Download PDF</button>
         <button class="btn btn-primary me-md-2" >Download Word</button> 
        {/* <button type="button" class="btn btn-primary">Upload File</button> */}
        </form>
      </div>
    )
}

我已导入重置并将其与 onSubmit 一起使用，但它似乎不起作用。我应该如何解决这个问题？

Answer 1

在用于注册状态的useForm中你没有提到状态，它应该是空对象所以将useform改成这样

  const {register, handleSubmit,formState: { errors },reset} =useForm({
        register:{}
      });

有关更多信息，您可以查看这个->https://react-hook-form.com/get-started（集成受控输入）

Answer 2

它应该可以工作，从 v7.* 开始，他们对 shouldUnregister 做了错误的某些版本，请尝试一下

默认情况下，删除输入时将保留输入值。但是，您可以将 shouldUnregister 设置为 true 以在卸载期间取消注册输入。

const {register, handleSubmit,formState: { errors },reset} =useForm({shouldUnregister: true, reValidateMode:  });