Блог

У меня есть проверка yup с требованием ответа API для формы крючка реакции. Моя форма похожа на:

 import React from "react";
import useForm from "react-hook-form";
import { schema } from "./schema";
import { useTestProps } from "./useTestProps";

function Sub({ title, showForm }) {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: schema
  });

  const { data } = useTestProps();


  const onSubmit = (data) => {
   //submit form
  };
  // console.log(errors);
  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>{title}</label>
        <input type="text" name="iip" ref={register} />
        <br />
        {errors.iip amp;amp; <p>{errors.iip.message}</p>}
        <br />
        <label>Email</label>
        <input type="text" name="email" ref={register} />
        <br />
        {errors.email amp;amp; <p>{errors.email.message}</p>}
        <br />
        <input type="submit" />
      </form>
    </div>
  );
}

export default Sub;
 

Схема проверки формы выглядит следующим образом,

 //schema.js

import * as yup from "yup";

export const schema = yup.object().shape({
  iip: yup
    .string()
    .required()
    .test("validate with testProps", "iip not found", (value) => {
      // validate that value should be one of testProps
      // if value is in data, return true, or return false
      return true
    }),
  email: yup.string().email().required()
});

 

Мое требование состоит в том, чтобы проверить поле iip данными, возвращенными из вызова API в useTestProps, что выглядит следующим образом,

 {
  "data": ["test1", "test2", "test3"]
}
 

Как я могу получить доступ к данным в тесте объекта схемы, где я могу сравнить введенное пользователем значение с ответом JSON?