React表单多函数更新同一错误数组异常问题排查

问题现象 #

• 点击提交按钮时，错误列表仅显示最后一个校验函数的错误，无法收集所有符合条件的错误
• 清空错误函数无法立即清空数组，首次点击提交时console.log(formErrors)输出空数组
• 后续点击会重复添加同一错误，更新字段后旧错误不会被清除

问题根源 #

1. useState异步更新特性：每次调用setFormErrors都基于当前闭包中的旧状态，多个校验函数连续调用时，后续函数拿到的仍是初始空数组，导致最后一次更新覆盖之前的结果
2. clearErrors后立即校验：setFormErrors是异步操作，调用后状态不会立即更新，后续校验函数仍基于旧状态添加错误
3. canSubmit逻辑反转：当前判断formErrors.length > 0时返回true（执行API），与实际需求相反，应该是无错误时才允许提交
4. ErrorAlert组件处理错误数组错误：把数组当作对象遍历Object.keys，无法正确渲染数组元素
5. hasCraftsmanship函数逻辑错误：crafts.push(crafts)会导致数组嵌套，无法正确统计选中的服务类型数量

修复后的完整代码 #

export default function ProfileForm(props) {
  const [formErrors, setFormErrors] = useState([]);

  // 校验链接请求字段
  const validateLinkRequest = () => {
    if (linkRequest === "") {
      return "Missing Link Request";
    }
    return null;
  };

  // 校验必填字符串字段
  const validateStringFields = () => {
    const requiredFields = [
      pocFirstName,
      pocLastName,
      email,
      phoneNumber,
      streetAddress1,
      city,
      state,
      zipcode
    ];
    if (requiredFields.some(field => field === "") || zipcode.length !== 5) {
      return "Missing Required Field";
    }
    return null;
  };

  // 校验服务类型复选框
  const validateCraftsmanship = () => {
    const hasSelectedCraft = Object.values(craftsmanships).some(({ has }) => has);
    if (!hasSelectedCraft) {
      return "Missing Service Types";
    }
    return null;
  };

  const canSubmit = () => {
    // 一次性收集所有错误，避免异步更新冲突
    const errors = [];
    const linkError = validateLinkRequest();
    const fieldError = validateStringFields();
    const craftError = validateCraftsmanship();

    if (linkError) errors.push(linkError);
    if (fieldError) errors.push(fieldError);
    if (craftError) errors.push(craftError);

    setFormErrors(errors);
    // 无错误时返回true，允许提交API
    return errors.length === 0;
  };

  const onFormSubmit = (e) => {
    e.preventDefault();
    if (canSubmit()) {
      // 执行API调用
      console.log("执行API调用");
    }
  };

  return (
    <form>
      {/* 表单内容 */}
      <ErrorAlert errors={formErrors} />
      <button onClick={onFormSubmit}>提交</button>
    </form>
  );
}

function ErrorAlert(props) {
  const { errors = [] } = props;

  return (
    <div className='div-block-34'>
      {errors.map((error, index) => (
        <div className='text-block-12' key={index}>{error}</div>
      ))}
    </div>
  );
}

关键修复说明 #

• 统一收集错误：将每个校验函数改为返回错误信息或null，在canSubmit中一次性收集所有错误后再更新状态，彻底避免异步更新导致的覆盖问题
• 修正canSubmit逻辑：返回errors.length === 0表示无错误，允许提交API，符合业务逻辑
• 修复ErrorAlert组件：直接遍历错误数组渲染内容，适配数组类型的错误列表
• 简化服务类型校验：使用some方法直接判断是否有选中项，避免数组操作错误
• 移除冗余清空逻辑：每次提交前重新收集错误，自然覆盖旧的错误列表，无需单独清空函数

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