title: How to switch subcomponent after render depend on state?
body: <p>There is three screen thar Index.tsx, Profile.tsx, Login.tsx. 
  I try to going Login to set AsyncStorage then back to Profile use this.state.member get from AsyncStorage to switch components inside Profile. But now I only can go back to index then profile in this way I can change sub component in Profile</p>
  
  <p>I done like this before by using react-navigation createSwitchNavigator(). But now
  I try to re-render in Profile by using this.setState({member: (result from AsyncStorage.getItem("member") ) ? AsyncStorage.getItem("member") : undefined }) in componentDidMount() </p>
  
  <p>Here's the code of the case, <a href="https://gist.github.com/sanhuang/4526dbd00051695c80b7b36dd7230ef8" rel="nofollow noreferrer">https://gist.github.com/sanhuang/4526dbd00051695c80b7b36dd7230ef8</a></p>
  
  <pre><code>export default class ProfileSreen extends Component {
  
    constructor(props) {
      super(props)
  
      this.state = {
        isLoading: true,
        isSignIn: false,
        member: undefined
      }
  
      this._getMemberStorage = this._getMemberStorage.bind(this);
    }
  
    componentDidMount() {
       this._getMemberStorage();
    }
  
    async _getMemberStorage(): Promise&lt;void&gt; {
      try{
        // let member = null;
        let member = await ExStorage.getItem("member");
        // console.log(member);
  
        if ( member !== null ){
          await this.setState({
            member,
            isSignIn: true
          });
        }else{
          await this.promisedSetState({
            member: null,
            isSignIn: false
          });
        }
        await this.promisedSetState({
          isLoading: false
        });
  
        return true;
      }catch(e) {
        console.error(e);
      }
    }
  
    promisedSetState = (newState) =&gt; {
      return new Promise((resolve) =&gt; {
        this.setState(newState, () =&gt; {
          resolve()
        });
      });
    }
  
    protected _renderLogin() {
      return (
        &lt;ListItem&gt;
            &lt;Button small rounded
              onPress={() =&gt; {
                this.props.navigation.navigate('Profile_Login');
              }}
            &gt;
              &lt;Text&gt;Login&lt;/Text&gt;
            &lt;/Button&gt;
        &lt;/ListItem&gt;
      )
    }
  
    protected _renderMember() {
      return (
        &lt;ListItem&gt;
          &lt;Body&gt;
            &lt;H2&gt;{this.state.member.cmt} {this.state.member.unit}{this.state.member.name},您好&lt;/H2&gt;
            &lt;Text note&gt;xxx&lt;/Text&gt;
          &lt;/Body&gt;
        &lt;/ListItem&gt;
      )
    }
  
  
    protected render() {
      let infocoms = null;
  
      if (this.state.isLoading ) {
        return (
          &lt;L.PageLoading /&gt;
        )
      }else{
        if (this.state.isSignIn) {
          infocoms = this._renderMember();
        } else {
          infocoms = this._renderLogin();
        }
  
        return (
          &lt;Root&gt;
            &lt;Container&gt;
            &lt;Content&gt;
              &lt;List&gt;
                {infocoms}
              &lt;/List&gt;
  
              &lt;Settings /&gt;
  
            &lt;/Content&gt;
            {&lt;L.IFooter /&gt;}
            &lt;/Container&gt;
          &lt;/Root&gt;
        );
      }
  
    }
  }
  </code></pre>
  
  <p>The result always render _renderLogin() even I logined</p>