Redux Form + Material UI - Asyn c проверка выполняется при изменении вместо размытия

Question

Я использую сокращенную форму с Material Ui. Я хочу, чтобы моя проверка asyn c срабатывала только при размытии (как и ожидалось), однако она запускается при изменении.

Моя среда

node: v12.14.1, npm : 6.13.4

npm пакетов

"material-ui": "0.20.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-redux": "7.2.0",
"redux": "4.0.5",
"redux-form": "^8.3.6",
"redux-form-website-template": "1.0.13"

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

Я загрузил пример UI материала отсюда https://redux-form.com/8.3.0/examples/material-ui/ Затем Я обновил все свои пакеты (поскольку в моем проекте есть более новая версия пользовательского интерфейса реакции и материалов). Чтобы обновить свои пакеты, я запустил следующее из моей root папки;

npm install -g npm-check-updates
ncu -u
npm update
npm install

Затем я запускаю свой проект и проверяю его с помощью инструментов redux. Введите текст в текстовое поле (например: firstName) @@ redux-form / START_ASYNC_VALIDATION срабатывает каждый раз, когда вводится новый символ.

Вот песочница проекта https://codesandbox.io/s/redux-form-material-ui-updated-8sos2?file= / package . json: 141-312

Ожидаемое поведение

Я ожидаю, что когда я изменю значения в форме (например, введу новый символ в поле firstName), изменится только действие (@@ redux-form / CHANGE) выполняется. Затем, когда я размываю поле, выполняется действие проверки asyn c (@@ redux-form / START_ASYNC_VALIDATION). Вот как ведет себя оригинальная демонстрация (https://redux-form.com/8.3.0/examples/material-ui/).

Фактическое поведение

Action @@ redux-form / START_ASYNC_VALIDATION запускается каждый раз, когда я меняю поле.

Мой вопрос

Я не уверен, что это проблема. Я думаю, что это могло быть;

1. Ошибка, которую я сделал при обновлении своих пакетов
2. Версии других пакетов, которые я использую (например, моя версия Material UI) несовместимы
3. Требуется некоторая конфигурация, чтобы получить форму redux для улья, как я ожидал
4. Проблема с формой redux (я открыл здесь проблему https://github.com/redux-form/redux-form/issues/4678)

Любая помощь очень ценится.

Спасибо,

Саймон

Answer 1

Вам необходимо указать, какие поля асинхронно проверять при размытии, используя конфигурацию asynchBlurFields.

asyn c проверка

export default reduxForm({
  form: 'MaterialUiForm',
  validate,
  asyncValidate,
  asyncBlurFields: ["email"],
})(MaterialUiForm);