ReactJS 后端驱动动态下拉框实现及useEffect内onSubmitform不生效问题

核心排查步骤 #

• 补全useEffect依赖数组
  当前提交逻辑所在的useEffect仅声明了errors作为依赖，但内部用到的isSubmitting、onSubmitform都属于外部变量，未加入依赖数组会触发闭包陷阱，拿到的始终是首次渲染的旧值，导致条件判断不生效。需要把这两个变量加入依赖数组，如果onSubmitform每次渲染都会重新生成，需要用useCallback包裹该函数减少不必要的effect触发。
• 拆分不相关的副作用逻辑
  下拉选项初始化和表单提交是完全无关的两个逻辑，写在同一个effect中会导致每次errors变化时都重复重置下拉选项，既冗余也可能引发状态异常。把setOptions逻辑拆分到单独的空依赖useEffect中，仅在组件初始化时执行一次即可。
• 校验判断条件是否真的满足
  在effect中打印errors、isSubmitting的实时值，确认是否真的同时满足「无校验错误」和「处于提交状态」两个条件。常见的触发失败原因是下拉选项未加value属性，导致选择后values.org_type取值异常，始终触发org_type字段的校验错误，使得errors长度不为0。
• 修正JSX语法错误
  React中DOM的class属性需要写为className，同时动态生成的option标签需要补充value属性，否则表单取不到正确的选中值。

修正后的代码示例 #

状态与副作用逻辑 #

const [options, setOptions] = useState([]);

// 单独处理下拉选项初始化，仅执行一次
useEffect(() => {
  // 原代码此处存在笔误，第二个选项写为了"0p2"，可根据需求修正
  setOptions(["op1","op2"])
}, [])

// 单独处理提交逻辑，补全依赖
useEffect(() => {
  if (Object.keys(errors).length === 0 && isSubmitting) {
    onSubmitform();
  }
}, [errors, isSubmitting, onSubmitform])

下拉框代码 #

<div className="form-group">
  <label htmlFor="exampleFormControlInput1">Organization Type</label>
  <select 
    id="dropdown" 
    name="org_type" 
    onChange={handleChange} 
    value={values.org_type}  
    className="form-control"
  >
    { options.map((element, index) => (
      <option key={index} value={element}>{element}</option>
    )) }
  </select>
</div>

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