Reduxフォームのサブミット検証でエラーメッセージが設定されない

Question

サブミット検証でフォームを作成しようとしています。私がフォームを提出すると、handleSubmitが発砲してSubmissionErrorを投げますが、もう何も起こりません。

は（単にエラーを毎回投げる）提出：

function submit(values) 
{ 
    console.log(values); 
    throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' }); 
} 

は例からフィールドをレンダリングします

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div> 
    <label>{label}</label> 
    <div> 
    <input {...input} placeholder={label} type={type}/> 
    {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
) 

マイ形式：

class LoginForm extends Component { 
    render() 
    { 
    const { error, handleSubmit, pristine, reset, submitting } = this.props 
    console.log(error); 
    return (
     <div> 
     <form onSubmit={handleSubmit}> 
      <h1>Login</h1> 
      <Field name="email" type="text" component={renderField} label="Username"/> 
      <Field name="password" type="text" component={renderField} label="Username"/> 
      {error && <strong>{error}</strong>} 
      <button type = "submit">Login</button> 
     </form> 
     </div> 
    ) 
    } 
} 

LoginForm = reduxForm({ 
    form: 'login', 
    onSubmit: submit 
})(LoginForm); 

export default LoginForm; 

私はSubmitを押すと、送信関数例外がスローされますが、何も起こらず、エラーメッセージがフォームとrenderFieldは示されていません。

Answer 1

次のようなreduxFormコンストラクタに検証メソッドを追加する必要があります。

function validateInput(input) { 
    let errors = {} 

    if (!data.email) { 
    errors.email = "Email is required." 
    } 

    if (!data.password) { 
    errors.password = "Password is required." 
    } 

    return errors 
} 

const loginForm = reduxForm({ 
    form: 'login', 
    onSubmit: submit, 
    validate: validateInput 
}) 

これは、彼らが有効でない場合は、入力フィールドの下にエラーを表示するにはReduxのフォームが発生します。もちろん

あなたがこのように動作するために接続する反応-再来であなたのコンポーネントを接続する必要があります。

export default connect(mapStateToProps)(loginForm(LoginForm)) 

Answer 2

をonSubmitから検証エラーを提出返すために使用されたThrowableのエラー。目的は、AJAX I/O の問題または他のサーバーエラーのために、妥当性の拒否からの妥当性検査のエラーの が原因で、約束の拒否を区別することです。 docs

したがって、SubmissionErrorの目的は直接エラーを投げることではありません。あなたは

return axios 
    .post('/sessions/login', values) 
    .then((res) => { 
      // do something with response 
    }) 
    .catch((err) => { 
      throw new SubmissionError(err.response.data); 
    });