React+Yup表单验证问题：修改关联字段后错误未更新

问题场景 #

在React项目中使用Yup配合react-hook-form做表单验证时，遇到以下问题：

• 表单包含两个下拉选择字段：开始小时和结束小时，验证规则要求开始小时必须小于结束小时
• 选择不符合规则的小时组合时，字段会正常触发验证并显示错误提示
• 修改其中一个字段使组合符合规则后，之前的验证错误无法自动更新消失
• 尝试在下拉框onChange事件中通过setTimeout调用trigger()触发验证，但效果不稳定：

setTimeout(() => {
    trigger()
}, 400)

• 尝试从control._formState.errors获取错误信息，也未解决问题

解决方案 #

1. 编写正确的跨字段验证Schema #

利用Yup的test方法实现跨字段验证，通过this.parent获取表单其他字段的值：

import * as Yup from "yup";

const hourSchema = Yup.object().shape({
  startHour: Yup.number()
    .required("开始小时为必填项")
    .test(
      "start-less-than-end",
      "开始小时必须小于结束小时",
      function (value) {
        // 通过this.parent获取整个表单的字段值
        const { endHour } = this.parent;
        // 确保endHour存在后再比较
        return endHour !== undefined ? value < endHour : true;
      }
    ),
  endHour: Yup.number()
    .required("结束小时为必填项")
    .test(
      "end-greater-than-start",
      "结束小时必须大于开始小时",
      function (value) {
        const { startHour } = this.parent;
        return startHour !== undefined ? value > startHour : true;
      }
    ),
});

2. 监听字段变化，主动触发验证 #

使用react-hook-form的watch方法监听两个小时字段的变化，当任一字段更新时，触发另一个字段的验证，确保错误状态实时同步：

import { useForm, useEffect } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

export default function HourForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    trigger,
    watch,
  } = useForm({
    resolver: yupResolver(hourSchema),
    defaultValues: {
      startHour: 9,
      endHour: 18,
    },
  });

  // 监听两个小时字段的变化
  const startHour = watch("startHour");
  const endHour = watch("endHour");

  // 当字段变化时，触发对应字段的验证
  useEffect(() => {
    if (startHour !== undefined) {
      trigger("endHour");
    }
    if (endHour !== undefined) {
      trigger("startHour");
    }
  }, [startHour, endHour, trigger]);

  const onSubmit = (data) => {
    console.log("表单提交数据：", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} style={{ padding: "20px" }}>
      <div style={{ marginBottom: "10px" }}>
        <label style={{ display: "inline-block", width: "100px" }}>开始小时：</label>
        <select {...register("startHour")}>
          {Array.from({ length: 24 }, (_, i) => i).map((hour) => (
            <option key={hour} value={hour}>
              {hour}
            </option>
          ))}
        </select>
        {errors.startHour && (
          <span style={{ color: "red", marginLeft: "10px" }}>
            {errors.startHour.message}
          </span>
        )}
      </div>
      <div style={{ marginBottom: "10px" }}>
        <label style={{ display: "inline-block", width: "100px" }}>结束小时：</label>
        <select {...register("endHour")}>
          {Array.from({ length: 24 }, (_, i) => i).map((hour) => (
            <option key={hour} value={hour}>
              {hour}
            </option>
          ))}
        </select>
        {errors.endHour && (
          <span style={{ color: "red", marginLeft: "10px" }}>
            {errors.endHour.message}
          </span>
        )}
      </div>
      <button type="submit">提交表单</button>
    </form>
  );
}

关键说明 #

• 避免直接访问control._formState.errors：这是react-hook-form的内部私有状态，推荐通过formState.errors获取错误信息，保证兼容性
• 放弃setTimeout触发验证：react-hook-form的状态更新是异步的，固定延迟无法保证验证时机的准确性，通过watch+useEffect的组合可以精准监听字段变化并触发验证
• 跨字段验证时必须关联两个字段的验证：修改其中一个字段后，另一个字段的验证规则依赖项发生变化，需要主动触发其重新验证才能更新错误状态

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