無法以縮略形式顯示提交錯誤

Question

我試圖在我的表單中顯示提交錯誤，但我找不出爲什麼這不起作用。當我嘗試提交表單時出現錯誤，我只是在控制檯中出現簡單錯誤，無法再次提交，儘管啓用了這些按鈕，並且沒有錯誤顯示在我的表單中。

未捕獲的（以諾）

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

，因爲它看起來在驚鴻一瞥，還有的submit()函數內部一些未被捕獲的錯誤（如日誌說...）。

這是因爲Redux-Form只捕獲SubmissionError，但沒有其他明顯的錯誤。

因此，解決辦法是處理自己的錯誤（例如派遣拒絕執行或catch塊內submissionFailed動作）

例如：

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