如何在redux形式中使用不同的名称id多次渲染相同的字段时验证字段

Question

这里我有验证问题，我想渲染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>
    )
}

FieldComponent

 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;
 };

Answer 1

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

<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;

}