Formik не обнаружил ошибок проверки Yup в массиве объектов - PullRequest
Новая
       21

Formik не обнаружил ошибок проверки Yup в массиве объектов

0 голосов
/ 22 апреля 2019

formik v1.5.2, yup v0.27.0, реагирует v16.8.6

Я не могу заставить проверку Yup работать в Formik с массивом объектов.Код на коды и поле https://codesandbox.io/s/kw1r49v25o?fontsize=14

Начальные значения: 

const INITIAL_VALUES = {
  users: [
    {
      value: "admin"
    }
  ]
};

Схема Yup: 

const usersSchema = Yup.object().shape({
  users: Yup.array().of(
    Yup.object().shape({
      value: Yup.string()
        .max(3)
        .required()
    })
  )
});

Я намеренно ограничил размер строки до 3 символов досгенерируйте ошибку проверки.

Компонент: 

function App() {
  const [data, setData] = useState(INITIAL_VALUES);
  useEffect(() => {
    setData({
      users: [
        {
          value: "trex"
        },
        {
          value: "velociraptor"
        }
      ]
    });
  }, []);

  return (
    <div className="App">
      <Formik
        initialValues={data}
        enableReinitialize={true}
        validateOnChange={true}
        validateSchema={usersSchema}
        render={({ values, errors, touched, isValid, isValidating }) => {
          console.log("render - isValid", isValid);
          console.log("render - isValidating", isValidating);
          console.log("render - errors", errors);
          return (
            <Form>
              <Field name="users[0].value" />
              <div>{`isValid = ${isValid}`}</div>
              {Object.keys(errors) > 0 ? (
                <div>{`Error: ${JSON.stringify(errors)}`}</div>
              ) : null}
            </Form>
          );
        }}
      />
    </div>
  );
}

И на странице нет ошибок.Я ожидаю увидеть строковые ошибки и isValid = false , когда добавлю новые символы на входе.

1 Ответ

0 голосов
/ 23 апреля 2019

Ваша схема Yup верна, это просто название пропа. Это должно быть validationSchema, а не validateSchema.

Обратите внимание, что, поскольку у вас нет поля для users[1], форма никогда не будет действительной, как сейчас (потому что "velociraptor" более трех символов). Но вы, возможно, уже знаете об этом и просто подаете пример таким образом.

...