Redux Form + Material UI - 在更改而不是模糊时运行异步验证

Question

我正在使用带有 Material Ui 的 redux 表单。我希望我的异步验证仅在模糊时触发（如预期的那样），但是它会在更改时触发。

我的环境

节点：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"

重现步骤

我从这里下载了 Material UI 示例 https://redux-form.com/8.3.0/examples/material-ui/ 然后我更新了我所有的包（因为我的项目有更新版本的反应和材料 UI）。 为了更新我的包，我确实从我的根文件夹中运行了；

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

然后我开始我的项目并使用 redux 工具进行检查。 在文本字段中输入文本（例如：名字） 每次输入新字符时都会触发@@redux-form/START_ASYNC_VALIDATION。

这里是项目https://codesandbox.io/s/redux-form-material-ui-updated-8sos2?file=/package.json:141-312的沙盒

预期行为

我希望当我更改表单中的值时（例如在 firstName 字段中键入一个新字符），只会运行更改操作 (@@redux-form/CHANGE)。然后当我模糊一个字段时运行异步验证操作（@@redux-form/START_ASYNC_VALIDATION）。这就是原始演示的行为方式 (https://redux-form.com/8.3.0/examples/material-ui/)。

实际行为

每次更改字段时都会触发@@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 配置指定要在模糊时异步验证哪些字段。

async validation

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