reactjs - 未处理的拒绝提交错误 : Submit Validation Failed

Question

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

虽然表单提交正常，但我无法在表单上显示 SubmissionError。我在 JS 控制台中收到以下错误:

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

我在 redux-form 提交验证处理中做错了什么？谢谢

注册表单

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) ...