Formik Yup `.test ()` пользовательская проверка не работает должным образом

Question

Я создал пользовательскую проверку Yup, используя .test().

// users is an array of strings
user: Yup.string().test(
  "user-check",
  "At lease one user should be added",
  () => users.length > 0
)

Цель состоит в том, чтобы проверить форму, когда добавлен хотя бы один пользователь. Поле ввода позволяет вам ввести имя пользователя (любое строковое значение), а затем нажать кнопку, чтобы добавить его в список.

Проверка работает хорошо после добавления 2-го имени пользователя (или добавления 1-го, а затем начала печатать на поле). Я делюсь этой живой демонстрацией: https://codesandbox.io/s/hopeful-goldwasser-shpbk

Шаги для воспроизведения

1. Нажмите на текстовое поле.
2. Введите имя пользователя.
3. Нажмите красную кнопку.

Ожидается

• Форма должна быть действительной.

Что вы получите

• Форма недействительна

Есть какие-либо отзывы об этом странном поведении?

Примечание

• Я не уверен, что это является источником проблемы.

• При первом добавлении пользователя проверка вызывается 2 раза: 1-й раз с пустым массивом users, а затем с правильным значением users (это пользователь, которого вы добавили)!

Answer 1

Область вашей формы Formik в настоящее время содержит только поле ввода для пользователя. Массив с пользователями в настоящее время не является частью вашей формы (не входит в начальные значения). Есть два варианта, которые вы могли бы сделать:

• Переместить массив пользователей в область видимости Formik. Работайте с FieldArray (https://jaredpalmer.com/formik/docs/api/fieldarray), например. Затем вы можете выполнить проверку так же, как вы пытаетесь сделать это сейчас.
• Выполните проверку вручную при запуске onSubmit. Например, вот так:

  const onSubmit = () => {
    if (users.length > 0) {
       // there are some users (form is valid) -> do API call or whatever necessary
    } else {
       // no users (form is not valid) -> display some error
    }
  };

Вы можете даже просто отключить кнопку отправки следующим образом (если это неправильно при работе с Formik):

<input type="submit" value="Submit" disabled={users.length === 0} />

Надеюсь, это поможет. Если у вас есть какие-либо вопросы, дайте мне знать, и я могу обновить свой ответ.