リアクション関数が値を返さない

Question

私は現在firebaseを使ってウェブサイトに特定のユーザーの姓名を入力していますが、何らかの理由でそれが機能していません。

getUserName(){ 
    firebaseAuth().onAuthStateChanged((user) => { 
     if(user){ 
      // var name = ref.ref('users/' + user.uid).once('value').then((snapshot) => console.log(snapshot.val().displayName)); 
      var name = user.displayName; 
      console.log("name in function: " + name); //prints full name 
      return name; 
     } 
    }); 
} 


render() { 
    var name = this.getUserName(); 
    console.log("name: " + name); //prints undefined 
    return (
     <div className="col-sm-6 col-sm-offset-3"> 
      <h1> Welcome {this.getUserName()} asdfasd </h1> 
     </div> 
    ); 
} 

これは私の2つの機能です。何らかの理由で、どちらの場合でもname変数を出力すると、2つの異なる変数が得られます。 getUserName（）では、ユーザーのフルネームを出力し、その値を返します。 DOMがレンダリングされるとき、getUserName（）関数がフルネームを出力しても、 "name"変数は未定義です。どんな助けでも大歓迎です！あなたが状態を使用する必要がありますので、あなたが...

ローカル変数をthis.SetState({name: value})に代わりvariable.Store名の値の状態を使用し、使用するこれまでthis.state.nameを使用して直接使用する必要が

Answer 1

実際には何も返さないので、あなたはこの var name = this.getUserName();のように、 name -variableにその戻り値を代入しようとしたとき、あなたは常にだけで設定します getUserName()

あなたの方法name~undefined。

Shailesh Prajapatiが示唆するように、コンポーネント状態で名前を設定する必要があります。私は、Reduxのようなものを使って、それをグローバルな状態に分けるべきだと主張するつもりです。また、render()機能の中でthis.getUserName()と呼ぶべきではありません。パフォーマンスのために非常に悪い可能性があります。

componentWillMount(){ 
    this.getUserName(); 
} 

getUserName(){ 
    firebaseAuth().onAuthStateChanged((user) => { 
     if(user){ 
      var name = user.displayName; 
      this.setState({ name: name }); 
     } 
    }); 
} 

render() { 
    return (
     <div className="col-sm-6 col-sm-offset-3"> 
      <h1> Welcome {this.state.name} asdfasd </h1> 
     </div> 
    ); 
} 

Answer 2

外部関数からアクセスすることはできません...関数の外状態/変数にアクセスするために反応し