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

Posted 2023-02-22

【中文标题】如何在redux表单中使用不同的名称ID多次渲染相同的字段时验证字段

【英文标题】：How to validate field when rendering same field multiple time with different name id in redux form

【发布时间】：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;
 ;

【参考方案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;