資料uiおよびredux-form - サブミットの検証を実装する方法

Question

登録ページを実装するためにReduxフォームとマテリアルUIを使用しています。私のonSubmit関数は、フェッチAPIを使用してサーバーにPOST要求を送信します。サーバ関連のエラー（例えば、電子メールの複製）がある場合、サーバは、拒否されたフィールドに関するいくつかの詳細を含むエラー応答を返す。

この段階では、私のフォームにエラーを表示したいのですが、動作させることができません。私はSubmissionErrorをスローし、JSONオブジェクトを投げてみました。私はそれに続くことができるオンラインの例はありますか？

ありがとうございました。

Answer 1

asyncValidate小道具reduxFormデコレータを使用する必要があります。

asyncValidate：

const asyncValidate = (values, dispatch) => { 
    // Your fetch request returns Promise object 
    return new Promise(resolve => { 
     // I use setTimeout just to imitate latency from server 
     setTimeout(() => { 
      throw { emailNotUnique: 'Email should be unique' } 
     }, 300) 
    }) 
} 

reduxForm：

export default reduxForm({ 
    form: 'yourFormName', 
    asyncValidate: asyncValidate, 
    asyncBlurFields: ['email'] 
})(YourForm)