ネイティブ持続ユーザーデータ

Question

私のアプリには2つのコンポーネント（PageとHome）があります。

HomeはそうのようなPageを拡張：

export default class Home extends Page

とPageはちょうどComponentを拡張します。 Pageで

私は上記のPageのconstructorに呼び出されたAsyncStorage

async getUser() { 
    // get from storage 
    this.setState({user}); 
} 

からユーザデータを取得する方法を持っています。

Homeには、this.state.userに依存するcomponentWillMountのメソッドがあります。明らかに、getUserメソッドが非同期であるため、これは機能しません。

ユーザー情報を取得してその情報を取得したら特定のメソッドのみを呼び出す方法はありますか？

export default class Page extends Component { 
    async getUser() { 
    // get from AsyncStorage 
    this.setState({user}); 
    } 
    componentWillMount() { 
    this.getUser(); 
    } 
} 

export default class Home extends Page { 
    async foo(user_id) { 
    this.setState({something}); 
    } 

    componentWillMount() { 
    this.foo(this.state.user); 
    } 

    render() { 
    return <Text>{this.state.something}</Text>; 
    } 
} 

Answer 1

私はユーザー情報を取得し、私はその情報を持っていたら、特定 メソッドを呼び出すことができる方法はありますか？

一般的な意味ではありませんが、もちろんいくつかの解決策があります。これは、非同期のデータ依存関係を持っていることになります。データが利用可能になった後にのみ、従属機能の呼び出しが行われるようにコードを記述する必要があります。

おそらく、これを行う最も簡単な方法は、componentWillUpdate代わりのcomponentDidMountを使用して、必要なデータを受信して​​いるかどうかを確認することです。

componentWillUpdate(nextProps, nextState) { 
    if (nextState.user != null && this.state.user !== nextState.user) { 
     this.prepareForUser(nextState.user); 
    } 
} 

は（あなたがcomponentWillUpdateで直接setStateことはできませんが、あなた以来のことに注意してください方法、それは後になるまで発生しません非同期（async）。あなたがチェーンに別のsetStateコールをcomponentDidUpdateを使用することができます。）

私が使用したい別のオプションは、（）は、組成物の代わりに、継承を使用することです。これにより、レンダリングを通してライフサイクルをより簡単に制御できるようになります。親はすべての子の従属データがロードされたときにのみ子をrenderにすることができ、子はデータの初期ロードに関連するタイミングの問題を心配する必要はなく、それはそのcomponentDidMountから欲しいものは何でも：

class UserContainer extends Component { 
    state = {}; 
    componentDidMount() { 
     this.getUser(); 
    } 
    async getUser() { 
     // get user from async store 
     this.setState({user}); 
    } 
    render() { 
     return (
      <div> 
       { this.state.user ? <UserView user={this.state.user} /> : <Spinner /> } 
      </div> 
     ); 
    } 
} 

class UserView extends Component { 
    componentDidMount() { 
     this.props.user != null 
    } 
} 

これはかなり"container component"パターンです。