如何在redux表单中使用不同的名称ID多次渲染相同的字段时验证字段答案

【问题标题】：How to validate field when rendering same field multiple time with different name id in redux form如何在redux表单中使用不同的名称ID多次渲染相同的字段时验证字段
【发布时间】：2018-09-08 08:42:02
【问题描述】：

这里我遇到了验证问题，我想渲染 5 个项目的列表，列表中的所有字段都相同，下面是代码

ListData = () => {
    let a = [];
    for (var i = 0; i < 5; i++) {
        a.push(<ListItemView value={i} key={i} />); // Component
    }
    return a;
};


render() {
    return (
     <div>
       <List>{this.ListData()}</List> // List of 5 items
       <Button disabled={this.props.disabledSubmission} 
        color="primary"type="submit">
        Invite Members
       </Button>
    )
}

字段组件

 const ListItemView = ({ value }) => {
   return (
    <ListItem>

        <div className="col-12 w-100">
            <div className="row">
                <div className="col-lg-4 col-sm-5 col-12">
                    <Field
                        name={`${value}-name`}       // 0-name
                        component={renderTextField}
                        label="Name"
                        className="mt-1"
                        fullWidth
                        margin="normal"

                    />
                </div>
                <div className="col-lg-5 col-sm-5 col-12">
                    <Field
                        name={`${value}-email`}     // 0-email
                        component={renderTextField}
                        label="Email"
                        className="mt-1"
                        fullWidth
                        margin="normal"
                        type="email"
                    />
                </div>
            </div>
        </div>
    </ListItem>
    );
 };

问题是，当我尝试使用 redux 表单进行验证时，我很困惑如何使用它的名称验证每个字段 - 0-name,0-email，等等...

那么，我如何通过循环或其他方式检查它，从而使每个字段的验证工作都静态地编写类似这样的内容

 const validation = (values) => {
  const errors = {};
  if(!values[`0-name`]) {
    errors.values[`0-name`] = 'Required'
  } else if(!values[`0-email`]) {
    errors.values[`0-email`] = 'Required'
  } 
  if(!values[`1-name`]) {
    errors.values[`1-name`] = 'Required'
  } ... // and many more...

   return errors;
 };

【问题讨论】：

标签： reactjs redux react-redux redux-form redux-thunk

【解决方案1】：

理想情况下，您应该有两个单独的纯函数，一个用于验证名称，一个用于验证电子邮件。如下所示。

<Field
                    name={`${value}-name`}       // 0-name
                    component={renderTextField}
                    label="Name"
                    className="mt-1"
                    fullWidth
                    margin="normal"
                    validate={validateName}

                />
            </div>
            <div className="col-lg-5 col-sm-5 col-12">
                <Field
                    name={`${value}-email`}     // 0-email
                    component={renderTextField}
                    label="Email"
                    className="mt-1"
                    fullWidth
                    margin="normal"
                    type="email"
                    validate={validateEmail}
                />

但是，如果你想要唯一的功能来完成这项工作

const validate = (value, allValues, props, name) => {
if(name.includes('email')&& notEmail(value)){
return 'invalid email'
}
if(name.includes('name')&& notName(value)){
return 'invalid Name' 

}

return undefiend;

}

【讨论】：