Redux 表单提交验证不起作用

Question

我尝试了此 url 中文档中的代码： https://redux-form.com/7.0.3/examples/submitvalidation/

但它不起作用。提交函数被调用，它抛出一个 SubmissionError 但我没有在我的表单中看到实际的错误。

这是我的代码：

/**
*
* SignupForm
*
*/

import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
import PropTypes from 'prop-types';
import messages from './messages';
import submit from './submit';
import './index.css';

const renderField = ({
  input, // eslint-disable-line
  name, // eslint-disable-line
  label, // eslint-disable-line
  type, // eslint-disable-line
  meta: { touched, error } // eslint-disable-line
}) => (
  <div className="input-group">
    <label htmlFor={name}>
      {label}
    </label>
    <div>
      <input {...input} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

class SignupForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="form-container">
        <h1 className="form-header">{messages.header.defaultMessage}</h1>
        <form onSubmit={handleSubmit(submit)}>
          <Field name="fName" component={renderField} type="text" label={messages.fname.defaultMessage} />
          <Field name="lName" component={renderField} type="text" label={messages.lname.defaultMessage} />
          <Field name="email" component={renderField} type="text" label={messages.email.defaultMessage} />
          <Field name="password" component={renderField} type="password" label={messages.password.defaultMessage} />
          <Field name="cpassword" component={renderField} type="password" label={messages.cpassword.defaultMessage} />
          <input type="submit" value="Next" />
        </form>
      </div>
    );
  }
}

SignupForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

export default reduxForm({
  // a unique name for the form
  form: 'signup-part1',
})(SignupForm);

这是提交表单：

import { SubmissionError } from 'redux-form';
import { validateEmail } from '../../utils';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function submit(values) {
  console.log('Submit Called');
  return sleep(100).then(() => {
    const valuesObject = values.toJS();
    if (!valuesObject.fName) {
      throw new SubmissionError({
        fName: 'First name is required',
        _error: 'Login failed!',
      });
    } else if (!valuesObject.lName) {
      throw new SubmissionError({
        lName: 'Last name is required',
        _error: 'Login failed!',
      });
    } else if (!valuesObject.email) {
      throw new SubmissionError({
        email: 'Email is required',
        _error: 'Login failed!',
      });
    } else if (!validateEmail(valuesObject.email)) {
      throw new SubmissionError({
        email: 'Invalid email address',
        _error: 'Login failed!',
      });
    } else if (!valuesObject.password) {
      throw new SubmissionError({
        password: 'Please enter a password',
        _error: 'Login failed!',
      });
    } else if (!valuesObject.cpassword) {
      throw new SubmissionError({
        cpassword: 'Please enter a password',
        _error: 'Login failed!',
      });
    } else if (valuesObject.password.length < 6) {
      throw new SubmissionError({
        password: 'Password must be at least 6 characters',
        _error: 'Login failed!',
      });
    } else if (valuesObject.password !== valuesObject.cpassword) {
      throw new SubmissionError({
        cpassword: 'Passwords don\'t match',
        _error: 'Login failed!',
      });
    }
  }).catch(error => {
    console.log('catch');
    throw new SubmissionError(error);
  });
}

export default submit;

我不明白为什么我看不到错误。我做的事情与示例完全相同。

Answer 1

好的，我设法解决了这个烦人的问题。我所要做的就是从“redux-form/immutable”而不是常规的“redux-form”导入 SubmissionError。 如果您使用 Immutable.js，请确保这样做