React/FirebaseのPromiseからデータを取得する方法は？

Question

これは、Reactコンポーネントのrender（）メソッド内の約束です。

firebaseRef.child("users/" + auth.uid).once('value').then((snapshot) => { 
    let userName = snapshot.val().name; 
}); 

私は（snapshot.valのデータを取得したい）。名前と

return(
    <h1>{userName}</h1> 
) 

に入れて、私はReduxのストアへのアクションの発送と約束からデータを得ることができます私はそれを必要とする場所で検索しますが、それを達成するためのより短い方法があるはずです。私はそうするためにさまざまな方法を試みたが、私は非同期性のために失敗したので...助けてください！

Answer 1

私は以前のコメントをupvoteするつもりだったが、彼はrenderメソッドのこの内部をやっことであることを言及しませんでした悪いアイデア。それは無限ループになります。 Render - > promise resolves - > set state - > render - >を繰り返します。あなたは、このようなfirebaseの約束を行う必要があります：

class Test extends React.Component{ 
    constructor() { 
    super() 
    this.state = {} 
    } 

    componentDidMount() { 
    let { auth } = this.props //or wherever it comes from 

    firebaseRef.child("users/" + auth.uid).once('value').then((snapshot) => { 
     this.setState({ userName: snapshot.val().name }); 
    }); 
    } 

    render() { 
    let { userName } = this.state 
    return (
     <h1>{userName}</h1> 
    ) 
    } 
} 

Answer 2

私はしばらくの間で反応を行っていないが、私はそれがだと思う：

firebaseRef.child("users/" + auth.uid).once('value').then((snapshot) => { 
    let userName = snapshot.val().name; 
    this.setState({ userName: userName }); 
});