Fehler beim Senden in Redux-Formular kann nicht angezeigt werden

Question

Ich versuche Submission Fehler in meinem Formular anzuzeigen, aber ich kann nicht herausfinden, warum das nicht funktioniert. Wenn ich versuche, ein Formular mit Fehlern zu senden, erhalte ich nur einen einfachen Fehler in der Konsole und kann es trotz der Aktivierung von Schaltflächen nicht erneut senden, und in meinem Formular werden keine Fehler angezeigt.

Uncaught (in Versprechen)

const validate = values => { 
    const errors = {} 
    const requiredFields = [ 'email', 'password' ] 
    requiredFields.forEach(field => { 
     if (!values[ field ]) { 
      errors[ field ] = 'Pole wymagane' 
     } 
    }) 
    if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { 
     errors.email = 'Podany adres jest nieprawidłowy' 
    } 
    return errors 
} 

function submit(values, dispatch) { 
     return new Promise((resolve, reject) => { 
      dispatch(actionCreators.loginUser(values.email, values.password)) 
      .catch(err => { 
       reject(err) 
      }) 
     }) 
    } 

class LoginForm extends Component { 
    constructor(props) { 
     super(props); 
     //this.onSubmit = this.onSubmit.bind(this); 
    } 
    render() { 
     const { error, handleSubmit, pristine, reset, submitting } = this.props 
     return (
      <form onSubmit={handleSubmit(submit)}> 
       <div> 
        <Field name="email" 
        component={renderTextField} 
        label="Email"/> 
       </div> 
       <div> 
        <Field name="password" 
        component={renderTextField} 
        type="password" 
        label="Hasło"> 
         {error && <strong>{error}</strong>} 
        </Field> 
       </div> 
       <br/> 
       <div> 
        <RaisedButton label="Zaloguj" 
        primary={true} 
        type="submit" 
        disabled={pristine || submitting} /> 
        <RaisedButton type="button" 
        disabled={pristine || submitting} 
        onClick={reset}>Reset 
        </RaisedButton> 
       </div> 
       <br /> 
      </form> 
     ) 
    } 
} 
reactMixin(LoginForm.prototype, LinkedStateMixin); 

const mapStateToProps = (state) => { 
    return { 
     user: state.user.user, 
     isAuthenticated: state.user.isAuthenticated 
    } 
} 
// const mapDispatchToProps = (dispatch) => { 
//  return { 
//   actions: bindActionCreators(actionCreators, dispatch) 
//  } 
// } 
const form = reduxForm({ 
    form: 'LoginForm', 
    validate, 
    onSubmit: submit 
})(LoginForm); 

export default connect(mapStateToProps)(form); 

Answer 1

Wie es bei einem Blick sieht, gibt es einige nicht erfasste Fehler in der submit() Funktion (wie das Protokoll sagt ...).

Dies ist, weil Redux-Form nur SubmissionError fängt, aber nicht andere einfache Fehler.

So ist die Lösung ist es, die Fehler selbst (zB Versand einer submissionFailed Aktion innerhalb des ablehnen Implementierung oder einem catch-Block)

Zum Beispiel zu handhaben:

function submit(values, dispatch) { 
    return new Promise((resolve) => { 
     dispatch(actionCreators.loginUser(values.email, values.password)) 
     .catch(err => { 
      //reject(err) 
      dispatch(someNewErrorAnouncingAction(err)) 
     }) 
    }) 
}