firebaseからユーザ名を取得できません

Question

現在、反応ネイティブのfirebaseデータベースからユーザ名を返そうとしています。 console.logは関数内で動作しますが、関数の外部には何も記録しません。私はどこが間違っているのか分かりません。ここに私のコードです。

componentWillMount() { 
    firebase.database().ref('/users/' + this.userId + '/username').once('value').then(function(snapshot) { 
    this.username = snapshot.val(); 
    console.log(this.username) 
    }); 
    console.log(this.username) 
    this.setState({ 
     username: this.username 
    }) 
    } 

Answer 1

JavaScriptの非同期性のためです。コールバック内でsetStateを実行する必要があります。コールバックの実行*内のコード*：ES6の矢印関数に構文を変更するいくつかの理由

firebase.database().ref('/users/' + this.userId + '/username').once('value').then(snapshot => { 
    this.username = snapshot.val(); 
    console.log(this.username); 
    this.setState({ 
     username: this.username 
    }) 
}); 

Answer 2

は、これが期待される動作である関数内this.setStateを追加すると

componentWillMount() { 
    firebase.database().ref('/users/' + this.userId + '/username').once('value').then((snapshot) => { 
    this.username = snapshot.val(); 
    console.log(this.username) 
    this.setState({ 
     username: this.username 
    }) 
    }) 
    }