redux-form 无法提交

Question

我正在创建我的第一个 Redux 表单，但该表单没有将信息添加到数据库中。

class UserInfo extends Component{
    renderField(field) {
        const { meta: { touched, error } } = field;
        const className = `form-group ${touched && error ? "has-danger" : ""}`;

        return (
          <div className={className}>
            <label>{field.label}</label>
            <input className="form-control" type="text" {...field.input} />
            <div className="text-help">
              {touched ? error : ""}
            </div>
          </div>
        );
      }
    onSubmit(values){

        //this.props.addUser(values);
        console.log(values);
    }
render(){
        const { handleSubmit, pristine, reset, submitting } = this.props;
        return(
            <div>
                <div>
                    <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                        <div className='form-row'>
                            <Field label='Name' component={this.renderField} name='username'  />
                            <Field label='Address' component={this.renderField }name='address'  />
                            <Field label='Contact' component={this.renderField} name='contact'  />
                            <Field label='Email'component={this.renderField} name='email' />
                            <button type="submit"  className="btn btn-primary">Add new User</button>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}

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

    if (!values.uername) {
      errors.username = 'Please enter a first name';
    }

    if (!values.address) {
      errors.address = 'Please enter an address';
    }

    if (!values.contact) {
        errors.contact = 'Please enter a phone number'
    }

    if (!values.email) {
      errors.email = 'Please enter an email';
    }

    return errors;
  }

export default reduxForm({
    validate,
    form: 'UserForm'
})(connect(null, { addUser })(UserInfo));

如果我在onSubmit 函数中使用console.log(values)，我不会在浏览器中得到任何输出。我正在使用createLogger 来帮助执行操作。它显示类型：

“@@redux-form/SET_SUBMIT_FAILED”

我不知道这是什么类型的错误。

Answer 1

使用开发者工具(ctrl+shift+I)，取redux--state--form--'NameofReduxform'--syncErrors。然后，您可能会看到一些必填字段。您需要填写这些字段才能使提交工作。希望这会有所帮助！