在Redux Form中渲染同名不同ID的重复字段时如何验证

搞定Redux Form里重复字段的验证其实不难，核心是用Redux Form专门提供的FieldArray组件来管理这些重复字段，而不是手动循环渲染。我来一步步给你拆解解决方案：

1. 用FieldArray替代手动循环 #

Redux Form的FieldArray组件是专门处理数组类型字段的，它会自动追踪每个数组元素的状态（比如是否触碰、错误信息等）。先把你原来的ListData替换成FieldArray的渲染逻辑：

render() {
  return (
    <div>
      {/* 用FieldArray渲染5个重复字段 */}
      <FieldArray name="members" component={this.renderMemberList} />
      <Button 
        disabled={this.props.disabledSubmission} 
        color="primary"
        type="submit"
      > 
        Invite Members 
      </Button>
    </div>
  )
}

// 渲染成员列表的方法
renderMemberList = ({ fields }) => {
  // 确保数组固定有5个元素（初始化空对象）
  while (fields.length < 5) {
    fields.push({});
  }
  // 防止数组长度超过5（可选，根据你的需求）
  while (fields.length > 5) {
    fields.pop();
  }

  return (
    <List>
      {fields.map((_, index) => (
        <ListItemView 
          key={index} 
          index={index} 
          fields={fields} 
        />
      ))}
    </List>
  );
}

2. 改造ListItemView组件 #

让ListItemView接收fields和index，然后用Field组件定义输入框，注意字段名要使用members[${index}].email这种数组索引格式，这样Redux Form才能正确识别每个字段：

const ListItemView = ({ fields, index }) => {
  const fieldName = `members[${index}].email`;
  // 获取当前字段的错误和触碰状态
  const hasError = fields.error?.[index]?.email;
  const isTouched = fields.touched?.[index];

  return (
    <div>
      <Field
        name={fieldName}
        component="input"
        type="email"
        placeholder="Enter member email"
        // 可以在这里设置字段级别的验证
        validate={[requiredValidator, emailValidator]}
      />
      {/* 显示错误信息 */}
      {isTouched && hasError && <span className="error">{hasError}</span>}
    </div>
  );
};

3. 定义验证函数 #

你需要两个基础验证函数：必填验证和邮箱格式验证，同时可以定义一个全局表单验证函数来检查整个数组：

// 必填验证
const requiredValidator = value => {
  return value ? undefined : "Email is required";
};

// 邮箱格式验证
const emailValidator = value => {
  if (!value) return undefined;
  const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  return emailRegex.test(value) ? undefined : "Invalid email format";
};

// 全局表单验证函数
const formValidator = values => {
  const errors = {};
  if (!values.members) {
    errors.members = [];
  } else {
    errors.members = values.members.map((member, index) => {
      const memberErrors = {};
      if (!member.email) {
        memberErrors.email = "Email is required";
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(member.email)) {
        memberErrors.email = "Invalid email format";
      }
      return memberErrors;
    });
  }
  return errors;
};

4. 把验证函数绑定到表单 #

最后，在你用reduxForm包裹组件的时候，把全局验证函数传进去：

import { reduxForm, Field, FieldArray } from 'redux-form';

// 你的表单组件
class InviteMembersForm extends Component {
  // ... 上面的render和renderMemberList方法
}

// 用reduxForm高阶组件包裹
export default reduxForm({
  form: "inviteMembersForm", // 表单唯一标识
  validate: formValidator // 绑定全局验证函数
})(InviteMembersForm);

关键注意事项 #

• FieldArray的name属性对应Redux Form store里的数组字段名（这里是members），所有重复字段都会挂载到这个数组下。
• 每个重复字段的name必须用数组名[索引].字段名的格式，这样Redux Form才能正确追踪每个字段的状态。
• 你可以选择在Field级别设置validate（字段级验证），或者在全局validate函数里统一验证，两种方式可以结合使用。

内容的提问来源于stack exchange，提问作者tapan dave