如何从 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>
    )
  }
}

如何从 React/Firebase 中的 Promise 中获取数据？

How to get data out of a Promise in React/Firebase?

javascript

firebase

reactjs

es6-promise

firebase-realtime-database