是的模式 - `when` 方法不起作用

Question

最近我正在努力创建 yup 模式。因为我正在这样做，所以我发现该方法when()完全不适合我，就像文档所说的和我在互联网上找到的其他解决方案一样。当我的复选框被选中时，true架构上的所有字段都应该是required，但他们没有。正如我的示例所示，我尝试了三种方法，但没有一种有效。也许有人知道我做错了什么？

我的测试代码是：

import "./styles.css";
import * as yup from "yup";
import { FormProvider, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import React, { useEffect } from "react";

export default function App() {
  const schema = yup.object({
    isRequired: yup.bool(),
    firstName: yup.string().when("isRequired", (_, schema) => {
      return schema.required();
    }),
    lastName: yup.string().when("isRequired", () => {
      return yup.string().required();
    }),
    contact: yup.string().when("isRequired", {
      is: true,
      then: yup.string().required("Required")
    })
  });

  const methods = useForm({
    mode: "all",
    defaultValues: {
      isRequired: true,
      firstName: "",
      lastName: "",
      contact: ""
    },
    resolver: yupResolver(schema),
    shouldUnregister: true
  });

  const { register, watch } = methods;
  const isRequired = watch("isRequired");

  useEffect(() => {
    console.log(schema.fields);
  }, [isRequired, schema]);

  return (
    <FormProvider {...methods}>
      <form autoComplete="off" noValidate>
        <input type="checkbox" {...register("isRequired")} />
        <input {...register("firstName")} />
        <input {...register("lastName")} />
        <input {...register("contact")} />
      </form>
    </FormProvider>
  );
}

https://codesandbox.io/s/infallible-wildflower-dsyon

Answer 1

您的第三个使用方法的解决方案when是正确的。它不起作用的原因是在前两个when语句中 forfirstName和lastName你总是返回 yupsrequired方法而不检查 if isRequiredis true。

const schema = yup.object({
  isRequired: yup.bool(),
  firstName: yup.string().when("isRequired", {
    is: true,
    then: yup.string().required()
  }),
  lastName: yup.string().when("isRequired", {
    is: true,
    then: yup.string().required()
  }),
  contact: yup.string().when("isRequired", {
    is: true,
    then: yup.string().required("Required")
  })
});

这是将函数传递给 时如何完成的when。

const schema = yup.object({
  isRequired: yup.bool(),
  firstName: yup
    .string()
    .when("isRequired", (isRequired, schema) =>
      isRequired ? yup.string().required() : schema
    ),
  lastName: yup
    .string()
    .when("isRequired", (isRequired, schema) =>
      isRequired ? yup.string().required() : schema
    ),
  contact: yup
    .string()
    .when("isRequired", (isRequired, schema) =>
      isRequired ? yup.string().required() : schema
    )
});