リアクトネイティブ：ストレージ

Question

からデータをフェッチする前にビューをレンダリング私は、ユーザーが私にログインしたユーザーにしている場合ログインしていない場合サインインもコンポーネントをレンダリングしようとしているがホームコンポーネントをレンダリングしようとしています。 でサインインもコンポーネントセット記憶「isLIn」から「真の」サインアウト上の[ホームコンポーネントから]ストレージ「isLIn」「false」ににして反応-ネイティブアプリケーションはストレージをチェック開くたびに設定Storageの値としてStateを設定します。

コードを見てください：

import React, { Component } from 'react'; 
import { AsyncStorage } from 'react-native'; 
import { Scene, Router } from 'react-native-router-flux'; 
import Login from './login_component'; 
import Home from './home_component'; 

var KEY = 'isLIn'; 

export default class main extends Component { 
    state = { 
    isLoggedIn: false 
    }; 

    componentWillMount() { 
    this._loadInitialState().done(); 
    } 

    _loadInitialState = async() => { 
    try { 
     let value = await AsyncStorage.getItem(KEY); 
     if (value !== null && value === 'true') { 
      this.setState({ isLoggedIn: true }); 
     } else { 
      this.setState({ isLoggedIn: false }); 
     } 
    } catch (error) { 
     console.error('Error:AsyncStorage:', error.message); 
    } 
    }; 

    render() { 
    const _isIn = (this.state.isLoggedIn===true) ? true : false; 
    return (
     <Router> 
      <Scene key="root" hideNavBar hideTabBar> 
      <Scene key="Signin" component={Login} title="Signin" initial={!_isIn} /> 
      <Scene key="Home" component={Home} title="Home" initial={_isIn}/> 
      </Scene> 
     </Router> 
    ); 
    } 
} 

私はなぜ知らないが、ストレージの値を取得する前に、ビューが最初にレンダリングします。反応ネイティブのライフサイクルに応じてレンダー（）はの後にのみ実行されます.WillMount（）としてReact_Docと表示されます。

私はAsyncStorageを使用してストレージを設定して削除し、ルーティングにはReact-Native-Router-Fluxを使用しています。

私は解決策を試してみました：

• forceUpdate
• Solution1

Answer 1

componentWillMountにSETSTATEを呼び出すと、再レンダリングをトリガしません。 componentWillMountは、状態が設定され、ビューが再レンダリングされる前に実行されます。 Reactネイティブ・ドキュメントから：

"これはレンダリングの前に呼び出されるため、このメソッドの状態を設定しても再レンダリングは実行されません。副作用やサブスクリプションの導入は避けてください。この方法では。 - https://facebook.github.io/react/docs/react-component.html#componentwillmount

代わりに、あなたはそれを待つためのライフサイクルを伝えることができない非同期で何をやっているのでcomponentWillReceiveProps()

Answer 2

で_loadInitialStateを呼び出す必要があります。しかしReactは州を提供しています。

state = { 
    isLoggedIn: false 
    isLoading: true 
    }; 

そして非同期に

_loadInitialState = async() => { 
    try { 
     let value = await AsyncStorage.getItem(KEY); 
     if (value !== null && value === 'true') { 
      this.setState({ isLoggedIn: true, isLoading: false }); 
     } else { 
      this.setState({ isLoggedIn: false, isLoading: false }); 
     } 
    } catch (error) { 
     console.error('Error:AsyncStorage:', error.message); 
    } 
    }; 

を状態を設定し、あなたのasynctaskが

render() { 
if(this.state.isLoading) return <div> Loading... </div> 
else return... 
}