使用user.name等字段名时出现Redux Form Validation错误

Question

我有一个带有redux形式的反应组件，如下所示

<div className="col-sm-12">
 <div className="form-group row">
  <div className="col-sm-4">
   <label>A. Name</label>
  </div>
  <div className="col-sm-8">
  <ul className="sub-qn-ans-list d-flex list-unstyled">
    <li>
      <Field
      name="first_name"
      component={renderField}
      type="text"
      placeholder="First name"
      className="form-control" />
    </li>
    <li>
      <Field
      name="last_name"
      component={renderField}
      placeholder="Last name"
      type="text"
      className="form-control" />
    </li>
  </ul>
</div>
</div>
<div className="form-group row">
<div className="col-sm-4">
  <label>B. Residential Address</label>
</div>
<div className="col-sm-8">
  <ul className="sub-qn-ans-list d-flex list-unstyled">
    <li>
      <Field
        name="residential.street"
        component={renderField}
        placeholder="Street"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.area"
        component={renderField}
        placeholder="Area"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.city"
        component={renderField}
        placeholder="City"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.district"
        component={renderField}
        placeholder="District"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.landline"
        component={renderField}
        placeholder="Landline"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.mobile"
        component={renderField}
        placeholder="Mobile"
        type="text"
        className="form-control" />
    </li>
  </ul>
</div>
</div>
</div>

我正在尝试对输入字段应用验证。字段first_name和last_name的验证工作正常。但是当我尝试为residential.street应用验证时，我收到错误。

下面是我的验证代码。

const LocatorValidation = (values, form) => {
const errors = {};
if (!values.first_name) {
  errors.first_name = 'Required';
} else if (!/[A-Za-z.]+/.test(values.first_name)) {
  errors.first_name = 'First name must have only alphabets';
}
if (!values.last_name) {
  errors.last_name = 'Required';
} else if (!/^[A-Za-z.]+$/.test(values.last_name)) {
  errors.last_name = 'First name must have only alphabets';
}
if (!values.residential) {
  errors.residential.street = 'Required';
}
return errors;
}

export default LocatorValidation;

这是显示错误的图像。

Answer 1

由于errors.residential.street中的错误状态，residential的errors属性未定义。所以你需要先将它设置为空对象

errors.residential = {}
errors.residential.street = "Required"

我也会改进检查

!values.residential || !values.residential.street