javascript - 如何访问 Yup 模式中的上下文

Question

我正在使用 react-hook-form与 Yup用于在我的应用程序中管理表单的库。
我正在尝试根据我的组件状态创建动态 Yup 模式。
例如:

import React, { useContext } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { FirstFormContext } from "../context/FirstFormContext";
import { SecondFormContext } from "../context/SecondFormContext";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().min(2), // <-- Here I want to access the value
  address: yup.string().min(2).max(20)
});

const SecondForm = () => {
  const { secondFormData, setSecondFormData } = useContext(SecondFormContext);
  const { firstFormData } = useContext(FirstFormContext);
  const { register, handleSubmit } = useForm({
    resolver: yupResolver(schema),
    context: firstFormData.type // <---- Passing the variable
  });
  const history = useHistory();

  const onSubmit = (data) => {
    setSecondFormData(data);
    history.push("/end-page");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button
        style={{ display: "block", marginBottom: "20px" }}
        onClick={() => history.push("/")}
      >
        Go back
      </button>
      {firstFormData.type === "one" ? (
        <input
          defaultValue={secondFormData.email}
          placeholder="email"
          {...register("email", { required: true })}
        />
      ) : firstFormData.type === "two" ? (
        <input
          defaultValue={secondFormData.address}
          placeholder="address"
          {...register("address", { required: true })}
        />
      ) : null}

      <button type="submit" style={{ display: "block", marginTop: "20px" }}>
        Next
      </button>
    </form>
  );
};

export default SecondForm;

如您所见，在我的组件中，我将上下文传递给 useForm钩子(Hook)，我想在 SecondForm 上方的 Yup 模式中访问它零件。
我怎样才能实现它？
谢谢你。

Answer 1

我是这样解决的:
内部 useForm Hook

const { register, handleSubmit } = useForm({
    resolver: yupResolver(schema),
    context: { type: firstFormData.type }
  });

在我的 schema :

const schema = yup.object().shape({
  email: yup
    .string()
    .email()
    .min(2)
    .when("$type", (type, schema) => {
      console.log(type);
      if (type === "one") {
        return schema.required();
      }
      return;
    }),
  address: yup.string().min(2).max(20)
});