如何从 Firebase React 获取和显示所有子列表

Question

我正在尝试通过获取用户帖子来执行“博客帖子”之类的操作，将其推送到 Firebase，然后将其重新显示在元素上。 这是我的代码的一部分

constructor(props){
    super(props);
    this.state = {
        title: '',
        story: '',
        date: ''
    };
}

componentDidMount(){
    const rootRef = firebase.database().ref();
    const post = rootRef.child('post').orderByKey();


   post.once('value', snap => {
       snap.forEach(child => {
           this.setState({
               date: child.key,
               title: child.val().title,
               story: child.val().story
           })
       });
   });

}

在渲染（）上

<div className="post">
      <h3>{this.state.date}</h3>
      <h2>{this.state.title}</h2>
      <p>{this.state.story}</p>
</div>

在 Firebase 数据库上

得到这个结果

那么我应该怎么做才能像结果模式一样显示元素并且可以显示所有数据列表。

Answer 1

我这样做得到了正确的结果

constructor(props){
super(props);
this.state = {
        title: [],
        story: [],
        date: [],
        post: '',
    };
};}

componentDidMount(){
const rootRef = firebase.database().ref();
const post = rootRef.child('post').orderByKey();

     post.once('value', snap => {
       snap.forEach(child => {
           this.setState({
               date: this.state.date.concat([child.key]),
               title: this.state.title.concat([child.val().title]),
               story: this.state.story.concat([child.val().story])
           });

           const postList = this.state.date.map((dataList, index) =>
                <p>
                    {dataList}
                    <br />
                    {this.state.title[index]}
                    <br />
                    {this.state.story[index]}
                    <hr />
                </p>

            );

            this.setState({
                post: postList
            });
       });
   }); }

在渲染（）上

<div className="diary">

  <ul>{this.state.post}</ul>

</div>

结果。