Javascript 以编程方式呈现的Redux字段的动态验证

无法找到我遇到的问题的直接答案，所以希望有人能帮我解决

我有一个简单的Redux表单，它只有一个

名字

和

姓氏

输入字段。这些字段不是显式写出的，而是以编程方式呈现的，如下所示：

。。。
RenderName输入（字段）{
const{content}=this.props；
返回(
);
}
...
render（）{
{this.renderNameInput（'firstName'）}
{this.renderNameInput（'lastName'）}
}

我遇到的问题是当一个字段未验证时显示错误。每个字段至少需要2个字符，最多16个字符（尽管这与我的具体问题无关）

我想做的是，当其中一个输入无效时，错误会显示在该输入下。如果两个输入都无效，则错误将显示在两个输入下（显示各自位置错误的结构和样式当然已完成，但不是此问题的一部分）

以下是我检查错误的方法：

。。。
isNameValid（字段）{
const{formState={}}=this.props；
const{syncErrors}=formState；
if（syncErrors&&syncErrors[字段]）{
返回false；
}
}
...

该组件连接到Redux存储，因此我可以访问表单中的

formState

和

initial

和

value

对象，以及它们被

visit

ed、

touch

ed等

如果-当用户更改输入值时-

syncErrors

对象在查看存储中的Redux状态时的样子（任意）：

然后，我希望在

firstName

输入下显示一条错误消息，但在

lastName

输入下不显示任何信息。同样，如果

lastName

是

syncErrors

对象的一部分，那么错误也会显示在该输入下。如果

firstName

和

lastName

都在

syncErrors

中，则错误将显示在两个输入下

我希望这是有道理的，有人能给我指出正确的方向。如果需要任何澄清，请让我知道

谢谢

如果您将错误消息作为道具传递给

字段

组件，那么您可能只想向

字段

组件添加一些代码，如果存在错误，则会显示错误。它应该是这样的：

{this.props.error？（{this.props.error}
）：null}

由于您无法更改

字段中出现的内容

组件，因此我建议允许存在

renderNameInput

的组件访问Redux中的错误对象。这样，您可以使

renderNameInput

返回

字段和错误消息。大概是这样的：

renderNameInput(field) {
  const { content, error } = this.props;

  return (
    <div>
      <Field
        id={field}
        name={field}
        component={FormField}
        validate={this.nameValidations}
        error={!this.isNameValid(field) ? content.nameError : null}
      />
      <p>{error[field] ? (<p>{error[field]}</p>) : null}}</p>
    </div>
  );
}

renderNameInput（字段）{
const{content，error}=this.props；
返回(
{error[field]？（{error[field]}
）：null}

);
}
实际上，我能够解决这个问题。我提出了这个方法：

。。。
isNameError（字段）{
const{content，formState={}，submitFailed}=this.props；
常量{initial，syncErrors，values}=formState；
如果（！submitFailed | |！syncErrors）{
返回null；
}
const isNotSameValues=初始[字段]！==值[字段]；
const invalidField=Boolean（isNotSameValues&&syncErrors[field]）；
如果（无效字段）{
返回content.nameError；
}
}
...

因为这个组件是用
reduxForm
包装的，所以我能够使用传递给我包装的组件的某些道具-
submitFailed
和
syncErrors
。如果表单字段未通过我的验证检查，则
syncErrors
对象将填充表单字段名称作为键，验证错误（错误消息）作为值

此外，当表单由于验证失败而提交失败时，
submitFailed
prop（布尔值）被设置为
true

我将我的组件连接到Redux存储，因此我能够访问
表单状态
，并使用
初始值
和
值
道具来比较每个输入字段值并运行验证检查

在我的初始
renderNameInput
方法中使用此选项如下所示：

。。。
RenderName输入（字段）{
const{content，formState={}，submitFailed}=this.props；
const label=get（内容，`${field}field.text`，''；
返回(
);
}
...

每个输入字段都会单独进行验证，如果它在初始提交时未通过检查，则错误消息将显示在每个输入下。当输入通过检查时，错误消失，我可以提交

非常感谢您的帮助，@ldtcoop
 是的，通常我会这么做。不幸的是，我用Redux
Field
包装的
FormField
组件来自一个UI工具包，它是另一个团队使用的npm包，我无法编辑。
error
prop应该只显示错误（如果有），或者什么也不显示。我正在尝试显示正确输入的错误，即使只有1个输入未通过验证，也不会同时显示这两个输入的错误…@Lushmoney，请查看我的新编辑，看看这是否能令人满意地解决您的问题
renderNameInput(field) {
  const { content, error } = this.props;

  return (
    <div>
      <Field
        id={field}
        name={field}
        component={FormField}
        validate={this.nameValidations}
        error={!this.isNameValid(field) ? content.nameError : null}
      />
      <p>{error[field] ? (<p>{error[field]}</p>) : null}}</p>
    </div>
  );
}