如何在React-Bootstrap表单提交成功后清空输入框无需刷新页面？

问题根因 #

你调用setForm({})清空表单时，直接将表单状态置为了空对象，导致所有表单对应的字段属性全部丢失。后续校验逻辑读取这些不存在的字段的length属性时，就会触发length of undefined报错。

解决方案 #

第一步：预定义完整的初始表单状态 #

声明表单状态前，先定义包含所有表单项的初始值对象，所有字段初始值设为空字符串：

// 按你实际的表单字段调整
const initialFormState = {
  username: '',
  email: '',
  remark: ''
}

// 表单状态初始化
const [form, setForm] = useState(initialFormState)
// 同步声明React-Bootstrap表单校验状态
const [validated, setValidated] = useState(false)

第二步：提交成功后用初始状态重置表单 #

提交逻辑执行完成后，不要用setForm({})清空，直接将表单状态重置为预定义的初始值，同时重置校验状态避免残留旧错误提示：

const handleSubmit = (e) => {
  e.preventDefault()
  const formDom = e.currentTarget
  if (!formDom.checkValidity()) {
    e.stopPropagation()
    setValidated(true)
    return
  }

  // 这里执行你的表单提交逻辑（接口请求等）
  submitForm(form).then(() => {
    // 提交成功后重置
    setForm(initialFormState)
    setValidated(false)
  })
}

该方案可以保证表单状态始终包含所有需要的字段，校验时读取length属性不会再出现undefined报错，同时不需要刷新页面即可让表单恢复到初始可提交状态。

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