web-dev-qa-db-ja.com

redux-formフィールドおよび/またはフォームエラーを手動で設定する

handleSubmit()関数からSubmissionErrorをスローすると、_redux-form_コードが適切なフィールドやフォーム自体のエラーを埋めることを認識しています。

それでも、フィールド/フォームエラーを設定するAPIは、handleSumbit()の実装を_redux-form_コード（SubmissionError例外ハンドラーを含む）の呼び出し元として緊密に結合します。

私のユースケースは次のようなものです。

_function asyncActionDispatcher(values) {                                     
  return (dispatch, getState) => {                                           
    // I'm using getState, which is not accessible in handleSubmit()         
    // But I'd also like to be able to set errors on the form fields and/or the
    // form.                                                                 
  };                                                                         
}                                                                            

function handleSubmit(values, dispatch) {                                    
  dispatch(                                                                  
    asyncActionDispatcher(values)                                            
  );                                                                         
} 
_

_redux-form_ではなくSubmissionErrorによって呼び出されるため、asyncActionDispatcher()にreduxをスローできません。

_redux-form_には、フィールド/フォームにエラーを設定するための別のAPIがありますか？

reactjsreduxreact-reduxredux-formredux-thunk
6
pleasedesktop

はい、そうです。

validateおよびasyncValidate小道具を使用して、フォームの値（それぞれ同期および非同期）のバリデーター関数を設定できます。

validateは、検証に合格した場合に空のオブジェクトを返す関数か、{ someField: 'some error', otherField: 'other error' }の形式で検証エラーの詳細を示すオブジェクトである必要があります。

一方、asyncValidateはPromiseを返す必要があります。これは、検証に合格した場合は正常に解決され、検証に合格しなかった場合は検証エラーの詳細を示すオブジェクト（上記を参照）で拒否されます。

handleSubmitは、onSubmitを呼び出す前に同期検証と非同期検証の両方を実行するように実装されているため、validateとasyncValidateを設定した場合はこれらのエラーは、追加の作業なしでフォーム/フィールドに自動的に表示されます。

お役に立てれば！

更新：

また、asyncActionDispatcherが終了するまで待って、結果に応じてSubmissionErrorで送信または拒否を続けることもできます。

function asyncActionDispatcher(values) {
  return (dispatch, getState) => {
    if (success) {
      return Promise.resolve('success')
    } else {
      return Promise.reject('error')
    }
  }
}

function onSubmit(values, dispatch) {
  // dispatch whatever action you need to dispatch
  return dispatch(asyncActionDispatcher(values))
    .then(() => {
      // i guess you need to do your actual submitting here
    })
    .catch(error => {
      return new SubmissionError({ _error: 'whatever you want here' })
    })
}

// and in the component
<form onSubmit={ handleSubmit(onSubmit) }> ... </form>

ソース： Redux-Form docs 、 ラップされたコンポーネントの小道具のドキュメント 、 同期検証の例 、 非同期検証の例

7
jakee

Redux-formにはフィールド/フォームにエラーを設定するための別のAPIがありますか？

asyncValidateおよび提案された他のオプションが機能しない場合の別のオプション（たとえば、検証で複数のフォームが考慮されるため）は、updateSyncErrorsを直接ディスパッチすることです。以下の使用例：

const { updateSyncErrors } = require('redux-form/lib/actions').default;

dispatch(updateSyncErrors('formName', {
  fieldName: 'Some Error Message'
}));
4
quetzaluz

handleSubmit()は次のように呼び出されます。

_handleSubmit(values, dispatch, props)
_

...そのpropsオブジェクトのプロパティの1つはstopSubmit()関数です。

それがあなたが使いたいものであり、APIは説明されているものと似ています ここ ：

_stopSubmit(form:String, errors:Object)
// Flips the submitting flag false and populates submitError for each field.
_

その関数を自分でインポートして使用する場合は、一意のform文字列識別子を指定する必要がありますが、handleSubmit()に過去のバージョンを使用する場合（propsオブジェクトを介して） ）、最初のパラメーターの引数を指定する必要はありません。

1
pleasedesktop

サンク内から呼び出されるaxiosの.catch()コールバックからSubmissionErrorをスローしているので、ReduxSaga内からも同じことができるはずです。キャッチされない例外エラーが発生しないように、必ずreturnにしてください。私の場合、サンクはaxios呼び出しを返し、.handleSubmit()の内部でサンクを返します。

0
Neil Girardi