渲染从 firebase 检索的异步数据

Question

我正在使用 componentDidMount 方法从我的 firebase 数据库中获取数据。

componentDidMount = () => {
    firebase.database().ref('posts').on('value', (snapshot) => {
        this.setState({
            posts: snapshot.val()
        })
    })
}

我想在我的渲染方法中使用这些数据。问题是 - 当渲染方法执行时，我的状态还没有更新，因为它的异步和状态为空。 如何在状态更改后呈现我的数据，并且我的数据将处于我的状态？

Answer 1

在检索数据之前，posts 字段的状态为空。然后设置帖子并再次调用渲染。你可以这样做：

render(){
   if (!this.state.posts){
      return <div>Loading</div>;
   }

   return <div>Render your posts here...</div>
}