React应用中校验并更新所有状态变量的更优雅实现方式

方案1：合并零散状态+统一校验逻辑（无额外依赖） #

这种方案不需要引入第三方库，仅通过调整状态组织形式就能大幅减少冗余代码：

1. 合并零散状态为单个表单对象
   避免声明十几个独立的状态变量，把所有表单字段收拢到同一个state中统一管理：

const [formState, setFormState] = useState({
  customerName: null,
  customerPhone: null,
  customerEmail: null,
  customerAddress: null,
  customerPostal: null,
  purchasePrice: null,
  surveyType: null,
  colleagueName: null,
  branch: null,
  branchPhone: null,
  company: null,
  otherCompany: null,
  furtherInformation: null
})

2. 预定义必填字段列表
   把所有需要校验非空的字段名存入数组，后续新增字段只需更新数组即可，不需要修改校验逻辑：

const requiredFields = [
  'customerName', 'customerPhone', 'customerEmail', 'customerAddress',
  'customerPostal', 'purchasePrice', 'surveyType', 'colleagueName',
  'branch', 'branchPhone', 'company', 'otherCompany'
]

3. 重写提交函数，批量处理空值和校验

function submission() {
  const updatedForm = { ...formState }
  // 批量把null转换为空字符串，不需要逐个写if判断
  Object.keys(updatedForm).forEach(key => {
    if (updatedForm[key] === null) {
      updatedForm[key] = ''
    }
  })
  // 单独处理company为Other的特殊规则
  if (updatedForm.company === 'Other' && updatedForm.otherCompany === '') {
    updatedForm.otherCompany = ''
  }
  // 批量更新状态
  setFormState(updatedForm)

  // 统一校验所有必填字段非空
  const isAllValid = requiredFields.every(field => updatedForm[field] !== '')
  if (isAllValid) {
    console.log('validation passed')
  }
}

方案2：使用表单管理库（适合复杂表单场景） #

如果项目中表单数量多、校验规则复杂，可以直接使用成熟的React表单类库，比如React Hook Form、Formik。这类库内置了表单状态管理、批量校验、错误提示等能力，不需要手动维护大量状态和校验逻辑，代码可维护性更高。

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