React-native共通のハンドラクラスからAPIを呼び出す

Question

私はFETCHを使用して外部Webサービスからデータを取得する共通の機能を持っています。この関数は、componentDidMount（）の下の複数の画面で呼び出され、解析されます。複数の場所で同じコードを繰り返す代わりに、私は共通のクラスの下に置いていますが、残念ながら、データはそれらの画面に返されません。以下

共通機能

export function convertValue(fromVal, toVal) { 
var requestObj = {}; 
let apiEndpoint = '<target endpoint>' 
return fetch(apiEndpoint, { 
     method: 'GET', 
     headers: { 
      'Content-Type': 'application/json' 
     }, 
     }) 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      return responseJson; 
     }) 
     .catch((error) => { 
      console.log('Error: ', error); 
     });} 

サンプルコール、無ポップアップ画面がロードされたとき。

componentDidMount() { 
AsyncStorage.getItem('user_default').then((value) => { 
    this.setState({userDefault: value}); 
}).then((value) => { 
    var sample = convertValue('A', 'B'); 
    Alert.alert(
           'Success', 
           JSON.stringify(sample), 
           [ 
            {text: 'OK', 
            onPress:() => { 
             console.log('.'); 
            }} 
           ] 
          ) 
});} 

Answer 1

 componentDidMount() { 
    AsyncStorage.getItem('user_default').then((value) => { 
    this.setState({userDefault: value}); 
     convertValue('A', 'B').then((json)=>{ 
alert(json) 
}) 
})} 

これはあなたのために働くかもしれません。問題は、非同期呼び出しの不適切な連鎖でした。

Answer 2

ニックは右である、正しい方法を発見した -

convertValue('A', 'B') 
        .then((responseJson) => { 
         this.setState({returnedValue: responseJson.convertedValue}); 
        });