サーバからフォームエラーを受信する

Question

以下はReactの私のサインアップ機能です。バックエンドから受け取ったエラーをどのようにレンダリングできますか？私はthis.setResponseをcatch部分に入れようとしました...それはうまくいきませんでした。私はcomponentWillReceivePropsがアップデートを処理するはずであることを理解していますが、これは親コンポーネントからではなく、サービスからのアップデートです。

エラーを印刷すると、エラーのある辞書が表示されますが、それらをフォームまたはレンダリングのフィールドに渡す方法はわかりません。

signup(evt) { 
    evt.preventDefault(); 
    ... 
     Auth.signup(dict) 
     .catch(function(err) { 
      alert("There's an error signing up"); 
      console.log(err.response); 
     }); 
}, 

認証サービスは、このように定義されています

signup(dict) { 
    console.log(dict); 
    return this.handleAuth(when(request({ 
     url: UserConstants.SIGNUP_URL, 
     method: 'POST', 
     type: 'json', 
     data: dict 
    }))); 
} 

そして、私は次のようにフィールドにエラーを送信することを望んだ：

<UserNameField 
    ref="username" 
    responseErrors={this.responseErrors} 
/> 

Answer 1

がUserNameFieldは同じコンポーネントであることを仮定しますauthコールバックとして、再レンダリングをトリガーする状態を設定し、値をUserNameFieldに渡して小道具として渡すことができます。

signup(evt) { 
    evt.preventDefault(); 
    ... 
     Auth.signup(dict) 
     .catch((err) => { 
      alert("There's an error signing up"); 
      console.log(err.response); 
      this.setState({error: err}); 
     }); 
}, 

<UserNameField 
    ref="username" 
    responseErrors={this.responseErrors} 
    error={this.state.error} 
/> 

これは.bind(this)と同じです。