React前端复选框验证失效：未勾选仍可进入下一步

核心问题原因 #

• 验证结果未同步到状态：你计算出了最新的validationResultEmployment，但没有把这个结果更新回applicantList的状态项中，导致组件拿到的始终是初始的isValidFreelancerConsent: true，无法触发禁用跳转的逻辑。
• 传递了旧的验证数据：给Employement组件传的是原状态里的旧验证结果，不是刚计算出来的最新值。
• 跳转逻辑未关联综合验证结果：只在复选框显示错误，但跳转操作没检查allValid这个全局验证标记，导致未勾选时仍能跳转。

分步解决方案 #

1. 把验证结果更新到状态中

计算完验证结果后，必须将其替换到applicantList对应的项里，再更新状态：

const applicantList = [...state.applicantList];
// 计算当前项的最新验证结果
const validationResultEmployment = isValidEmployement(applicantList[index]);
// 将新结果写入对应项
applicantList[index].validationResultEmployment = validationResultEmployment;
// 更新状态（这里以useState为例，useReducer逻辑类似）
setApplicantList(applicantList);

2. 传递最新的验证结果给组件

传递props时，直接用更新后的applicantList里的验证结果，而不是原状态的旧值：

<Employement
  // 省略其他props
  validationResultEmployment={applicantList[currentActiveStep].validationResultEmployment}
/>

3. 用allValid严格控制跳转

处理下一步按钮的点击事件时，必须先检查综合验证结果allValid，只有通过才允许跳转：

const handleNext = () => {
  const currentData = applicantList[currentActiveStep];
  const validation = isValidEmployement(currentData);
  if (validation.allValid) {
    // 执行跳转逻辑
    setCurrentActiveStep(prev => prev + 1);
  } else {
    // 可选：提示用户未完成验证
    console.log("请完成所有必填项验证");
  }
};

4. 简化组件内的验证判断

组件里的isValid判断可以直接取值，无需多余的三元表达式：

isValid={props.validationResultEmployment.isValidFreelancerConsent}

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