如何從React / Firebase中的Promise中獲取數據？

Question

這是React組件的render（）方法中的承諾。

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

我想獲取snapshot.val（）。name的數據並將其放在

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

我可以通過將動作分派到redux存儲來從promise中獲取數據，然后在需要的地方檢索它，但是我想應該有一種更短的方法來實現它嗎？ 我嘗試了不同的方法來執行此操作，但由於異步性而失敗了，所以請...幫助！

Answer 1

我有一段時間沒有做React了，但我認為是：

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

Answer 2

我本來要反對前面的評論，但他沒有提到在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>
    )
  }
}