ネイティブコンポーネントのライフサイクルメソッドが適切な順序で呼び出されない

Question

React Native Component LifecycleおよびComponent Lifecycleの場合、componentWillMountメソッドはrenderメソッドの前に呼び出される必要がありますが、これは私のプロジェクトには当てはまりません。私はfetchオペレーションをcomponentWillMountの中でやっていますが、それが何かをしている間に、renderメソッドはcomponentWillMountが終了する前に呼び出されます。

class UserHomeScreen extends Component { 
state = { userID: '' }; 
componentWillMount(){ 
    AsyncStorage.getItem('userId').then((value) => { 
     this.setState({ userID: value }); 
     const API_ENDPOINT= 'https://myserverAPI'; 
     const userID = value; 
     fetch(API_ENDPOINT,{ method: "GET", 
      headers:{ 
       'Authorization': 'Bearer '+ userID 
      } 
     }) 
      .then((response) => response.json()) 
      .then((responseJson) => { 
       console.log(responseJson); 
       userInfo = new UserInfo(); 
       userInfo.updateValues(responseJson); 
       AsyncStorage.setItem("userInfo",JSON.stringify(userInfo),null); 
       backInfo = AsyncStorage.getItem("userInfo").then(value); 
      }) 

    }); 
} 

render(){ 

    return(
     <Text>hello { this.state.userID } 
     </Text> 
    ) 
} 

}

Answer 1

彼らは、ライフサイクルの正しい順序で呼び出さ取得されています。ここに私のクラスです。 Fetch APIが同期していないPromiseを返すため、問題はfetchにあります。これを解決するには、プロミスの内部に状態を設定した場合に、再レンダリングを強制します。 Promiseため

this.setState({mode = 'loading'}) 
API.fetch().then(this.setState({mode = 'finished'})); // pseudo code 

または力待機。私はオプション1を使用し、レンダリングメソッドにプレースホルダを設定します。

render() { 
     return (
      this.state.mode == "loading" ? <div>"Loading..." </div> : 
      <div>{do your stuff with the fetched response}</div> 
    }