reactxでの非同期アクション後のエラーの表示

Question

reduxフォームを使用してユーザーを登録しようとしています。すべての同期検証が機能していますが、ユーザーがフォームを送信して電子メールがすでに登録されている場合に問題が発生します。エラーは次のように、私がアクセスできるようにしていた返され

export function registerUser(details, callback) { 
return(dispatch) =>{ 
    dispatch(startRegisteing()); 
    axios.post(URL, { 
     "email": details['email'], 
     "name": details['username'], 
     "password": details['password'] 
    }).then((data) =>{ 
     callback(); 
     dispatch(RegistrationSuccessfull(data)) 
    }).catch((error) => { 
     console.log('error', error.response.data.message); 
     //throw new SubmissionError(error.response.data.message); 
     dispatch(RegistrationFailed(error.response.data.message)) 
    }) 
} 
} 

それのための減速だけで状態を更新

export function RegistrationFailed(error) { 
return{ 
    type: types.REGISTRATION_ERROR, 
    payload:error 
} 
} 

RegistrationFailedアクションが

switch (action.type){ 
    case types.REGISTRATION_SUCCESSFUL: 
    console.log("nanana too ", action); 
    return{ 
     ...state, isRegisteringUser:false, 
     data:action.data 
    }; 
    case types.REGISTRATION_ERROR: 
    console.log("current state", state); 
    return{ 
     ...state, error: action.payload 
    } 
} 

私の質問は、私がどのようにできていますこのエラーをフォームにユーザに提示することができます

<form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}> 
         <Field 
          name="username" 
          lable="Username" 
          type="text" 
          component={ this.renderField } 
         /> 
         <Field 
          name="email" 
          type="email" 
          lable="Email" 
          component={ this.renderField } 
         /> 
         {// I want to present the error here } 
         {error && <strong>{error}</strong>} 
         <Field 
          name="password" 
          type="password" 
          lable="Password" 
          component={ this.renderField } 
         /> 
         <Field 
          name="confirm_password" 
          type="password" 
          lable="Confirm Password" 
          component={ this.renderField } 
         /> 
         <button type="submit" className="btn btn-primary" disabled={submitting}>Register</button> 
         <Link className="btn btn-danger" to="/login">Cancel</Link> 

        </form> 

Iが反応形式のドキュメントとしてthrow new SubmissionError(error.response.data.message);を試してみましたと言うが、そのはUnhandled rejection SubmissionError: Submit Validation Failed 。なお、エラーを上げる：反応-Reduxの初心者をしています。どんな助けにもなります

Answer 1

reduxストアの状態のerrorフィールドにエラーが格納されているため、このフィールドはmapStateToPropsを使用してフォームに登録し、フィールドがnullでない場合はメッセージを表示できます。

... 
import ... 
... 

class YourComponent extends React.Component{ 

     render(){ 
      return(
        <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}> 
         <Field 
          name="username" 
          lable="Username" 
          type="text" 
          component={ this.renderField } 
         /> 
         <Field 
          name="email" 
          type="email" 
          lable="Email" 
          component={ this.renderField } 
         /> 

         {this.state.yourReducer.error && <strong>{this.state.yourReducer.error}</strong>} 
         <Field 
          name="password" 
          type="password" 
          lable="Password" 
          component={ this.renderField } 
         /> 
         <Field 
          name="confirm_password" 
          type="password" 
          lable="Confirm Password" 
          component={ this.renderField } 
         /> 
         <button type="submit" className="btn btn-primary" disabled={submitting}>Register</button> 
         <Link className="btn btn-danger" to="/login">Cancel</Link> 

        </form> 
       ); 
      } 

} 

const mapStateToProps=(state) =>{ 
    "yourReducer": state.yourReducer 
} 

export default connect(mapStateToProps)(YourComponent); 

Answer 2

あなたは、あなたが直接お店にthis.propsを使用すると、エラーを表示することができます、コンポーネント内の小道具にお店をバインドするmapStateToPropsを使用することができます。