React - 非同期操作でエラーが発生したときにコンポーネントの状態を更新する

Question

Reactにはかなり新しく、バックエンドJSON APIに結びついたサインイン/ログイン機能を構築しています。 私は送信ボタンが押されたときにAPI呼び出しを行うサインアップフォームコンポーネントを持っています。 APIコールは、認証サービスによって処理されます。 私は、APIからの失敗応答の場合に初期コンポーネントの状態を更新しようとしていますが、キャッチブロック内でコンポーネントの状態にアクセスできないため、 。 - しかし、一度catchブロック内で私がやりたい何

import React from 'react'; 
import Auth from '../services/AuthService'; 
import {ButtonInput, Panel} from 'react-bootstrap'; 
import {Form, ValidatedInput} from 'react-bootstrap-validation'; 
import {Radio, RadioGroup} from 'react-bootstrap-validation'; 
import Loader from 'react-loader-advanced'; 



export default class Signup extends React.Component { 


    constructor() { 
     super(); 
     this.state = { 
      loader: false 
     }; 
    } 


    _handleValidSubmit(values) { 

     this.setState({loader: true}); 
     Auth.signup(values.email, values.password, values.firstName, values.lastName) 
      .catch(function (err) { 

       var response= JSON.parse(err.response); 
       var errors = response.error; 
       var errorText = ''; 
       for (var k in errors){ 
        if (errors.hasOwnProperty(k)) { 
         errorText = errorText + errors[k] + '\n'; 
        } 
       } 
       alert(errorText); 
       return false; 
      }); 




    } 

    _handleInvalidSubmit(errors, values) { 
    } 


    render() { 

     return (
      <Panel> 
       <Form onValidSubmit={this._handleValidSubmit.bind(this)} 
         onInvalidSubmit={this._handleInvalidSubmit.bind(this)}> 


        <ValidatedInput 
         type='email' 
         name='email' 
         label='Email' 

         errorHelp={{ 
         required: 'Please enter your email', 
         isEmail: 'Please enter a valid email' 
        }}/> 

        <ValidatedInput 
         type='password' 
         name='password' 
         label='Password' 

         validate='required,isLength:6:60' 
         errorHelp={{ 
         required: 'Please specify a password', 
         isLength: 'Password must be at least 6 characters' 
        }}/> 

        <ValidatedInput 
         type='text' 
         name='firstName' 
         label='First Name' 
         validate='required,isAlpha,isLength:2:200' 
         errorHelp={{ 
         required: 'Please enter your first name', 
         isAlpha: 'Please enter a valid first name', 
         isLength: 'Please enter a valid first name' 

        }}/> 

        <ValidatedInput 
         type='text' 
         name='lastName' 
         label='Last Name' 
         validate='required,isAlpha,isLength:2:200' 
         errorHelp={{ 
         required: 'Please enter your last name', 
         isAlpha: 'Please enter a valid last name', 
         isLength: 'Please enter a valid last name' 
        }}/> 
        <Loader show={this.state.loader} message={'loading'}> 
         <ButtonInput 
          type='submit' 
          bsSize='large' 
          bsStyle='primary' 
          value='Register' 
         /> 
        </Loader> 

       </Form> 
      </Panel> 
     ) 
    } 
} 

ローダーをキャンセルしてコンポーネントを再レンダリングするために、_handleInvalidSubmitのcatchブロックでthis.setState({loader: false});のようなものを追加している：ここではコンポーネントのコードですコールバックはコンポーネントコンテキストにアクセスできません。 ご協力いただきありがとうございます！

Answer 1

のようにあなたはここに自分自身を助けるためにJavascriptのクロージャを使用して、何かを行うことができます：それはJSではかなり標準トリックです

_handleValidSubmit(values) { 

    this.setState({loader: true}); 
    var that = this; 
    Auth.signup(values.email, values.password, values.firstName, values.lastName) 
     .catch(function (err) { 
      that.setState({loader: false}); 
      var response= JSON.parse(err.response); 
      var errors = response.error; 
      var errorText = ''; 
      for (var k in errors){ 
       if (errors.hasOwnProperty(k)) { 
        errorText = errorText + errors[k] + '\n'; 
       } 
      } 
      alert(errorText); 
      return false; 
     }); 
} 

。

Answer 2

トランスバータを使用している場合は、キャッチハンドラで無名関数を使用できます。

...catch(err=>{this.setState({loader: false})});