非同期関数の設定状態を

Question

以下の非同期関数を使用して、有効なユーザー資格情報をRESTサービス経由で検証しています。

async doesLoginExist(regCode) { 
    if (loginCode.match(loginCodePattern)) { 
     try { 
     await LoginService.getUserByLoginCode(); 
     return {}; 
     } catch (err) { 
     if (err.status === 404) { 
      return { 
      error: 'Your login code is not recognized.', success: null 
      }; 
     } 
     return { 
      error: 'Service is temporarily unavailable.', success: null 
     }; 
     } 
    } 
    return {}; 
    } 

ただし、この関数内で何らかの状態を設定しようとすると、

async doesLoginExist(regCode) { 
    await this.setState({ canProceed: false }); 
    if (loginCode.match(loginCodePattern)) { 
     try { 
     await LoginService.getUserByLoginCode(); 
     await this.setState({ canProceed: true }); 
     return {}; 
     } catch (err) { 
     if (err.status === 404) { 
      return { 
      error: 'Your login code is not recognized.', success: null 
      }; 
     } 
     return { 
      error: 'Service is temporarily unavailable.', success: null 
     }; 
     } 
    } 
    return {}; 
    } 

もはや正しく画面上に表示する検証メッセージとして使用されてしまうの発信者に私の{エラー、成功}オブジェクトを返していないようにみえます。別の小さな問題は、ログイン・コードが入力されたテキスト・ボックス入力のautoFocusも機能しないことです。

この機能の中で状態を設定する必要がありますか？

Answer 1

1. 確認doesLoginExistがコンポーネントのコンテキストに適切にバインドしてください。しかし、それは非常に一般的な問題です。 Read more here 例doesLoginExist自体をバインドする方法 - あなたは、コンストラクタ

   constructor() { 
       super(); 
       this.doesLoginExist = this.doesLoginExist.bind(this); 
   } 
   
   async doesLoginExist() { 
       this.setState({ canProceed: false }); 
       ... 
   } 
   

2. オプションのリファクタリングで明示的にそれをしなければならないdoesLoginExistからthis.setState呼び出しを抽出して - 別の方法に、それはdoesLoginExist

   の再利用性を高めます

   handleSomethingHappened =() => { 
       this.setState({ canProceed: false }); 
       const result = await doesLoginExist(regCode) 
       this.setState({ canProceed: true }); 
   } 
   

乾杯。