React表单onSubmit提交时如何正确清空内部表单字段

现有写法正确性判断 #

你在handleSubmit函数中直接执行setFormData([{name:'',description:'',type:'',required:''}])的写法功能上完全可行：只要你的formData始终保持「单条表单项对象组成的数组」这个结构，这段代码可以正常触发组件重渲染，把所有表单字段清空为初始空值，不存在功能性bug。

更优实现参考 #

现有写法的主要问题是可维护性差：空值结构重复写了两次，后续如果要给表单加新字段，需要同时修改useState初始化参数和提交重置处的代码，很容易漏改导致重置后字段和初始状态不一致。更稳妥的写法是把初始状态抽离为固定常量：

// 把初始表单空值抽离为常量，后续字段调整只需要修改这一处
const INITIAL_FORM_VALUE = [{
  name: '',
  description: '',
  type: '',
  required: ''
}]

function FormComponent() {
  // 初始化直接引用常量
  const [formData, setFormData] = useState(INITIAL_FORM_VALUE)

  const handleSubmit = (e) => {
    e.preventDefault()
    // 这里写你的表单提交逻辑，比如接口请求
    // 重置时直接传入常量即可，不需要重复写空对象结构
    setFormData(INITIAL_FORM_VALUE)
  }

  // 其余表单渲染、输入绑定逻辑
}

额外注意点 #

• 如果后续你要做动态增减表单项的功能（比如点击按钮新增多组同结构表单项），抽离常量的写法依然适用，不需要修改重置逻辑。
• 如果后续表单复杂度提升（比如加校验、嵌套字段），可以考虑用专门的表单状态库（比如react-hook-form），这类库自带reset类的方法，不需要手动维护重置状态，但针对你当前纯useState管理简单表单的场景，上面的常量抽离方案已经足够轻量好用。

内容的提问来源于stack exchange，提问作者nOhAr