如何用REDUX表单多个时间呈现相同的字段在多个时间呈现同一字段时如何验证字段

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，etc et et est ...

因此，我如何使用循环或使验证可用于每个字段的内容，并用静态写入类似的内容

 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

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

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