Javascript 未捕获类型错误：无法读取属性'；长度'；未定义的，使用react和redux表单验证

我正在使用redux表单并在这里作出反应，并尝试使用验证。我的所有功能都正常工作，但出于某种原因，当我尝试验证字段必须是我获得的特定长度属性时：

Uncaught TypeError: Cannot read property 'length' of undefined

代码如下：

import React, { Component } from 'react';
import {Field, reduxForm} from 'redux-form';

class PostsNew extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  renderField(field) {
    return (
      <div className="form-group">
        <label><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        {field.meta.touched ? field.meta.error : ''}
      </div>
    )
  }

  onSubmit(values) {
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <Field
          label="Title for Post"
          name="title"
          component={this.renderField}
        />
        <Field
          label="Categories"
          name="categories"
          component={this.renderField}
        />
        <Field
          label="Post Content"
          name="content"
          component={this.renderField}
        />
        <button type="submit" className="btn btn-success">Submit</button>
      </form>
    );
  }
}

function validate(values) {
  const errors = {};

  //Validate the inputs from values
  if(!values.title) {
    errors.title = "Enter a title!";
  }
  if(!values.categories) {
    errors.categories = "Enter some categories!";
  }

  if(!values.content) {
    errors.content = "Enter some content please!";
  }

  if(!values.content.length < 20) {
    errors.content = "Content must be longer than 3 characters!";
  }
  //If errors is empty, the form is fine to submit
  //If errors has any properties, redux form assumes form is invalid
  return errors;
}

export default reduxForm({
  validate,
  form: 'PostsNewForm'
})(PostsNew);

import React，{Component}来自'React'；
从“redux form”导入{Field，reduxForm}；
类PostsNew扩展组件{
建造师（道具）{
超级（道具）；
this.onSubmit=this.onSubmit.bind（this）；
}
渲染场（场）{
返回(
{field.label}:
{field.meta.toucted？field.meta.error:''}
)
}
onSubmit（值）{
console.log（值）；
}
render（）{
const{handleSubmit}=this.props；
返回(
提交
);
}
}
函数验证（值）{
常量错误={}；
//验证值的输入
如果（！values.title）{
errors.title=“输入标题！”；
}
如果（！values.categories）{
errors.categories=“输入一些类别！”；
}
如果（！values.content）{
errors.content=“请输入一些内容！”；
}
如果（！values.content.length<20）{
errors.content=“内容必须超过3个字符！”；
}
//如果错误为空，则可以提交表单
//若错误有任何属性，redux表单将假定表单无效
返回错误；
}
导出默认reduxForm({
验证
表格：“PostsNewForm”
})（新邮）；

如果（！values.content | |！values.content.length<20）{}

---

您也可以尝试在属性本身之前先检查对象。

我不确定这是否是正确的方法，但它确实有效

if(values.content){
    if(values.content.length < 20){
      errors.content = "Content must be longer than 20 characters!";
    }
  }

if（values.content）{
如果（值.content.length<20）{
errors.content=“内容必须超过20个字符！”；
}
}

我觉得最好的方法是进行内联验证

<Field
  label="Post Content"
  name="content"
  component={this.renderField}
  validate={(value) => value && value.length > 20 ? undefined : 'Content must be longer than 20 characters!'}
/>

value&&value.length>20？未定义：“内容必须超过20个字符！”}
/>

<Field
  label="Post Content"
  name="content"
  component={this.renderField}
  validate={(value) => value && value.length > 20 ? undefined : 'Content must be longer than 20 characters!'}
/>