由于异步验证，如何显示Redux形式的警告？

Question

Redux-forms支持验证错误和警告。

错误会显示一条消息，并阻止提交表单，而警告仅显示一条消息。

Redux表单还支持异步验证。

我错误地假设将支持异步验证错误和警告，但事实并非如此。

不幸的是，异步验证并不能正式发出警告。

目前，要摆脱使用redux-forms会花费大量的精力，因此我试图找到一种足够的解决方法。

一种解决方案是手动向表单添加警告。如果可能的话，那么异步验证通常可以照常执行，但是要在最后设置警告，而不是提供预期的错误对象。

但是我看了看文档，似乎没有办法手动添加警告或错误。

您可以将验证函数传递到特定字段或整个表单，然后将这些验证函数根据需要由redux-forms调用。

看来不能直接设置错误和警告，但是也许我们可以手动触发特定字段的重新验证？

不，显然目前还不可能。

总结一下：

• 异步验证警告是不可能的。
• 无法手动设置表单警告。
• 无法手动触发字段的同步验证。

任何建议，见解或纠正都非常欢迎。
如果我在任何这些要点上错了，我将非常高兴！

如果找不到解决方案，那么我将寻找一个替代库，并且将开始繁重的工作，摆脱redux-forms。

这无疑很好地提醒了我自己的假设愚蠢。

Answer 1

我与丹尼的建议和使用去reducer.plugin()在我的根减速监听终极版形式的异步验证完成动作@@redux-form/STOP_ASYNC_VALIDATION和（无论正确与否）通过注射它从错误更改为警告action.payload到syncWarnings。Redux-form 然后将其作为 meta.warning道具传递给字段。

减速机代码：

import { reducer as formReducer } from 'redux-form';

...

const errorToWarning = (state, action) => {
  /* eslint-disable no-unused-vars, no-case-declarations */
  switch (action.type) {
    case "@@redux-form/STOP_ASYNC_VALIDATION":
      const { asyncErrors, ...noErrors } = state;
      const syncWarnings = action.payload || undefined;
      return { ...noErrors, syncWarnings };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  form: formReducer.plugin({
    FirstForm: errorToWarning,
    AnotherForm: errorToWarning
  }),
  // other reducers
});

export default rootReducer;

成分：

const MyTextField = ({ meta: { touched, error, warning }, ...props }) => {
  let cssClass = "";
  let errorText = "";

  if (touched) {
    cssClass = warning ? "warning" : cssClass;
    cssClass = error ? "error" : cssClass;

    errorText = warning || errorText;
    errorText = error || errorText;
  }

  return (
    <TextField
      className={cssClass}
      hintText={props.hintText || ""}
      {...props}
      errorText={errorText}
      warning={warning}
    />
  );
};

我正在使用 Material UI（这TextField是来自，未显示在导入中）。

有关更多信息，请参阅redux-form 文档reducer.plugin()。