使用Reactstrap与useReducer实现多字段表单验证的方案咨询

优化方案 #

你完全可以把所有表单状态、校验状态都统一交给useReducer管理，不需要额外声明多个零散的useState，核心逻辑可以拆成3部分：状态结构调整、校验规则抽离、reducer逻辑统一处理。

1. 调整初始状态结构 #

在initialState里新增errors字段，统一存储所有表单字段的校验结果：

const initialState = {
  // 原有表单字段不变
  companyId: "",
  companyName: "",
  website: "",
  fiscalYearEnd: "",
  taxIDNumber: "",
  companyTypeID: "",
  isKeyCompany: "",
  databaseName: "",
  statusID: "",
  // 原有其他状态不变
  companyMasterData: [],
  errorAlertVisible: false,
  formVisible: true,
  companyMasterAdded: false,
  // 新增：统一存储所有字段的校验错误
  errors: {}
}

2. 抽离校验规则配置 #

把所有字段的校验规则单独写成配置对象，后续新增字段/修改规则直接改这个配置即可，不用动业务逻辑：

// 校验规则配置：key为字段名，value为校验函数，返回错误信息则校验不通过，返回空则通过
const validationRules = {
  companyId: (value) => !value ? "CompanyId is required" : "",
  companyName: (value) => !value ? "CompanyName is required" : "",
  databaseName: (value) => !value ? "DatabaseName is required" : "",
  statusID: (value) => !value ? "StatusID is required" : "",
  // 后续新增字段的校验规则直接在这里加即可
  // 示例：税号长度校验：taxIDNumber: (value) => value.length !== 15 ? "税号长度需为15位" : ""
}

3. 调整reducer逻辑 #

新增两个action类型，分别处理输入变更和表单提交前的全量校验：

const formReducer = (state, action) => {
  switch(action.type) {
    case 'INPUT_CHANGE': {
      const { field, value } = action.payload
      // 输入时实时校验当前字段
      const error = validationRules[field]?.(value) || ""
      return {
        ...state,
        [field]: value,
        errors: {
          ...state.errors,
          [field]: error
        }
      }
    }
    case 'VALIDATE_ALL': {
      // 提交前全量校验所有字段
      const newErrors = {}
      Object.keys(validationRules).forEach(field => {
        const error = validationRules[field](state[field])
        if (error) newErrors[field] = error
      })
      return {
        ...state,
        errors: newErrors
      }
    }
    // 原有其他action逻辑保持不变
    default: return state
  }
}

4. 简化组件内逻辑 #

删掉所有零散的校验相关useState，统一走reducer的状态：

const CompanyMasterAdd = () => {
  const [state, dispatch] = useReducer(formReducer, initialState)
  const history = useHistory()

  const handleInputChange = (e) => {
    dispatch({
      type: 'INPUT_CHANGE',
      payload: {
        field: e.target.name,
        value: e.target.value
      }
    })
  }

  const addCompanyMaster = (e) => {
    e.preventDefault()
    // 先触发全量校验
    dispatch({ type: 'VALIDATE_ALL' })
    // 校验通过再走提交逻辑
    setTimeout(() => { 
      // 加setTimeout是为了拿到最新的errors状态，也可以直接在reducer里封装提交逻辑
      const hasError = Object.values(state.errors).some(error => error)
      if (!hasError) {
        // 此处放你的表单提交逻辑
      }
    }, 0)
  }

  // 渲染表单部分
  return (
    <Form onSubmit={addCompanyMaster} id="companyMasterForm">
      <FormGroup row>
        <Label for="companyId" sm={2}>CompanyId</Label>
        <Col sm={2}>
          <Input
            type="text"
            name="companyId"
            value={state.companyId || ""}
            onChange={handleInputChange}
            invalid={!!state.errors.companyId}
          />
          <FormFeedback>{state.errors.companyId}</FormFeedback>
        </Col>
      </FormGroup>
      <FormGroup row>
        <Label for="companyName" sm={2}>CompanyName</Label>
        <Col sm={2}>
          <Input
            id="companyName"
            type="text"
            name="companyName"
            value={state.companyName || ""}
            onChange={handleInputChange}
            invalid={!!state.errors.companyName}
          />
          <FormFeedback>{state.errors.companyName}</FormFeedback>
        </Col>
      </FormGroup>
      {/* 其他字段同理，不需要单独写校验逻辑 */}
    </Form>
  )
}

方案优势 #

• 所有状态统一由reducer管理，逻辑集中没有零散的状态声明
• 校验规则抽离，后续新增/修改字段校验不需要修改核心逻辑，可维护性强
• 表单渲染逻辑简洁，每个字段只需要绑定对应name即可，不需要单独写onChange的校验回调
• 支持单字段实时校验和提交前全量校验两种场景，适配大部分表单需求

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