Question

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

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

我想在我的渲染方法中使用这些数据。问题是-执行render方法时，我的状态尚未更新，因为其异步且状态为null。状态更改后如何呈现数据，我将数据保持在我的状态？

Answer 1

在检索数据之前，状态为null的发布字段。然后设置发布并再次调用渲染。您可以执行以下操作：

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

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

渲染异步数据，从Firebase检索

1 个答案: