checkbox - 在 Yup 测试函数中返回 true 不会清除 react-hook-form formState 中的先前错误消息

Question

回购以复制问题：https ://codesandbox.io/s/yup-react-hook-form-material-checkbox-5dqbm

我正在处理我用 react-hook-form 和 yup 创建的表单。我有一个复选框组，我试图要求在提交之前至少选择一个复选框。我使用 Material UI 创建了一个复选框组，并使用 yup 测试功能处理了验证。

这是我显示结构的默认值。

 const defaultValues = {
    companyName: "",
    singleCheckbox: false,
    multiCheckbox: { option1: false, option2: false }
  };

这是我的是的验证。基本上，我正在检查 multiCheckbox 的选项之一是否为真，返回真，否则返回假。

 const yupSchema = yup.object().shape({
    companyName: yup.string().required("Company name is required"),
    singleCheckbox: yup.boolean().test("singleCheckbox", "Required", (val) => {
      console.log(val, "yup singleCheckbox result");
      return val;
    }),
    multiCheckbox: yup
      .object()
      .shape({
        option1: yup.boolean(),
        option2: yup.boolean()
      })
      .test(
        "multiCheckbox",
        "At least one of the checkbox is required",
        (options) => {
          console.log(
            options.option1 || options.option2,
            "yup multiCheckbox result"
          );
          return options.option1 || options.option2;
        }
      )
  });

问题：当我在未填写任何字段的情况下点击“提交”按钮时，我看到了所有我应该看到的错误消息。当我开始填写输入表单并单击单个复选框时，错误消息正在消失，但 multiCheckbox 的错误消息并没有消失。

首先我认为测试功能有问题，这就是为什么我也对 singleCheckbox 实现了相同的逻辑。singleCheckbox 按预期工作，但 multiCheckbox 没有，即使 yup 的测试函数返回 true。

我尝试过的：我尝试将 useForm 的重新验证值更改为 onBlur 和 onChange ，但对我来说没有用。

观察：单击提交按钮会显示所有错误消息。选择 multiCheckbox 的选项之一并再次点击提交按钮后，将清除 multiCheckbox 的错误消息。所以我假设 yup 验证和 react-hook-form 验证之间存在脱节。但是为什么单个 singleCheckbox 没有发生相同的断开连接？

标签： checkboxmaterial-uiyupreact-hook-form