Question

我正在使用redux-form启用服务器端验证，当用户提交SignUp表单时，如果服务器响应错误，表单会显示错误...在这种情况下，错误有一个来自服务器的状态为422并且正在响应w {"errors":{"email":["has already been taken"]}}

当表单提交正常时，我无法在表单上显示SubmissionError。我在JS控制台中收到以下错误：

Unhandled rejection SubmissionError: Submit Validation Failed

我对redux-form提交验证处理有什么问题？感谢

SignUpForm

const ensureValid = response => {
  if (response.status === 422) {
    return response.json().then(({errors}) => {
      throw new SubmissionError({
        email: 'Already in Use',
        _error: 'failed!',
      });

    });
  }
  return response;
};

class SignUp extends React.Component {

  handleSubmit(data) {
    const request = new Request('http://localhost:4400/auth/', {
     method: 'POST',
     headers: new Headers({
       'Accept'       : 'application/json',
       'Content-Type' : 'application/json',
     }),
     body: JSON.stringify({ user: data })
    });

    fetch(request).then(ensureValid).then(response => {
      return tryLogin(response, this.props.dispatch);
    });


   }

  render() {
    const { error, handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <div className="container">
        <div className="row justify-content-md-center">
          <div className="col-6">

            <h1>Sign Up - it's free.</h1>

            <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>

              <Field
                name="first_name"
                type="text"
                component={renderField}
                label="First Name"
              />

              <Field
                name="last_name"
                type="text"
                component={renderField}
                label="Last Name"
              />

              <Field
                name="email"
                type="text"
                component={renderField}
                label="Email"
              />

              <Field
                name="password"
                type="password"
                component={renderField}
                label="Password"
              />

              <button type="submit" disabled={submitting}>Submit</button>

              {error && <strong>{error}</strong>}
            </form>

          </div>
        </div>
      </div>
    );
  }
}

// Decorate the form component
SignUp = reduxForm({
  form: 'SignUp' // a unique name for this form
})(SignUp);

const mapStateToProps = state => {
  return {
  };
};

const mapDispatchToProps = (dispatch) => bindActionCreators({
  dispatch
}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(SignUp);

Answer 1

原来我需要更新：

在：

fetch(request)...

在：

return fetch(request) ...

未处理拒绝SubmissionError：提交验证失败

1 个答案: