【问题标题】:Validating ReduxForm: Nested Values验证 Redux 表单:嵌套值
【发布时间】:2018-10-04 15:07:35
【问题描述】:

我在 ReduxForm 中进行了验证,直到我必须验证名称嵌套的字段,即:location.coordinates[0]

这个数据在 Redux Store 中是这样的:

"location" : {
    "type" : "Point",
    "coordinates" : [ 
        103.8303, 
        4.2494
    ]
},

当尝试使用验证此类字段时

方法 1

if (!values.location.coordinates[0]) {
    errors.location.coordinates[0] = 'Please enter a longtitude';
}

我收到错误:

TypeError: 无法读取未定义的属性“坐标”

方法 2

if (values.location !== undefined) {
    errors.location.coordinates[0] = 'Please enter a longtitude';
    errors.location.coordinates[1] = 'Please enter a latitude';
}

我收到错误:

TypeError: 无法读取未定义的属性“坐标”

问题:处理此类字段的正确方法是什么?

/src/containers/Animals/AnimalForm.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { renderTextField } from './FormHelpers';

class AnimalForm extends Component {
    render() {
        return (
            <div>
                <form onSubmit={ this.props.handleSubmit }                     
                        <Field
                            label="Longitude"
                            name="location.coordinates[0]"
                            component={renderTextField}
                            type="text"
                        />                      
                        <Field
                            label="Latitude"
                            name="location.coordinates[1]"
                            component={renderTextField}
                            type="text"
                        />   
                </form>
            </div>
        )
    }

}

const validate = values => {
    let errors = {}

    if (values.location !== undefined) {
        errors.location.coordinates[0] = 'Please enter a longtitude';
        errors.location.coordinates[1] = 'Please enter a latitude';
    }
    if ((values.location !== undefined) && (values.location.coordinates !== undefined)) {
        errors.location.coordinates[0] = 'Please enter a longtitude';
        errors.location.coordinates[1] = 'Please enter a latitude';
    }

    return errors;
}

function mapStateToProps(state) {
    return { ... }
}

export default connect(mapStateToProps)(reduxForm({
    form: 'animal',
    validate
})(AnimalForm))

/src/containers/Animals/FormHelper.js

import React from 'react';
import { FormGroup, Label, Input, Alert } from 'reactstrap';

export const renderTextField = ({input, type, meta: {touched, error}, ...custom}) => (
    <div>
            <Label>{ label }</Label>
            <Input
                type={type}
                value={input.value}
                onChange={input.onChange}
            />
            {touched && error && <Alert color="warning">{ error }</Alert>}
    </div>
)

【问题讨论】:

    标签: javascript reactjs redux redux-form redux-form-validators


    【解决方案1】:

    在 validate 方法中,如何构造初始错误对象:

    let errors = {
      location: {
        coordinates: []
      }
    }
    

    【讨论】:

      【解决方案2】:

      下面的解决方案可以工作

      const validate = values => {
          let errors = values;
          if(values){
              if (values.location) {
                 errors.location.coordinates[0] = 'Please enter a longtitude';
                 errors.location.coordinates[1] = 'Please enter a latitude';
              }
          }
              return errors;
       }
      

      【讨论】:

      • 我们在验证函数的开头有let errors = {},它传递了values变量。我们不应该检查验证函数中的values 变量吗?
      • @Nyxynyx 对不起,我误解了你的问题。我已经更新了我的答案,请试一试
      猜你喜欢
      • 2018-10-10
      • 2018-03-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-11-14
      • 2016-05-21
      • 1970-01-01
      相关资源
      最近更新 更多