Reactjs 在redux表单中多次以不同名称id呈现同一字段时如何验证字段

Reactjs 在redux表单中多次以不同名称id呈现同一字段时如何验证字段,reactjs,redux,react-redux,redux-form,redux-thunk,Reactjs,Redux,React Redux,Redux Form,Redux Thunk,这里我遇到了验证问题,我想呈现5个项目的列表,其中列表中的所有字段都是相同的,下面是代码 ListData = () => { let a = []; for (var i = 0; i < 5; i++) { a.push(<ListItemView value={i} key={i} />); // Component } return a; }; render() { return ( <d

这里我遇到了验证问题,我想呈现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>
    )
}

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

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

}